下面我们可以再复制几块，看一下整体的效果 .... 回到网页的代码模式 ...

选中 <article> 和 </article> 之间的所有代码 .... 复制 ... 另起一行 .... 粘贴 .... 简单修改一下 ...

再复制几块 ....

现在我们会发现几个问题 ... 首先是每一行内容块之间没有空间 ... 再就是 ... 有些内容块被前面的内容块挡住了，布局出现了问题。

这里内容五这个区块被 内容三给挡住了。这是因为 ... 内容三这个区块里的图片比内容四里的图片高一点 ...

这样内容三区块整体的高度就比内容四大一些 ... 所以挡住了内容五这个区块 ...

打开网页的样式表， 我们先给每个内容块的下面添加一个下边的外边距 ...

我们可以把这个外边距添加到 .content-box 这个类里面，也可以添加到包装内容块的 <article> 元素上 ...

这里我们加到 .content-box 里面 ... margin-bottom:20px ，添加一个 20 像素的下边的外边距 ...

下面我们再解决一下内容块布局的问题 ... 引起布局的原因是每个内容块的高度不一致 ...

我们可以给包装图片的元素上设置一下统一的高度 ... 然后再设置溢出为隐藏 ... 这样应该可以解决这个问题 ...

包装内容块图片的元素上定义了一个 .media-box 类，我们可以使用它作为样式的选择器 ...

.media-box{height:260px;overflow:hidden;}

.media-box 类所在的 <div> 标签包装了内容块的图片，设置了这个 <div> 标签的高度为 260px，溢出为隐藏 ... 也就是，如果这个 <div> 标签里面的内容的高度大于 260px ，多出来的内容会被隐藏 ...

回到网页的视图模式 .... 现在就不会有布局问题了 ....