>>> 下载【朝花夕拾 – DIV+CSS布局实战系列视频教程】图片素材
通过之前教程的学习，相信朋友们对网页中文本对象的样式处理应该形成比较系统的概念了，包括标题、段落、列表、菜单等等，本节教程将针对图片元素的CSS定义展开学习，很多东西只要之前的内容熟练了，理解起来也是非常容易的事情。现在看看图片列表模块在网页中的效果：
也是非常简单的结构，首先是一个标题，直接跟在上节教程中UL关闭标签后面：
Gallery Example
由于subhead的类样式已经定义过了，所以在这里我们只是把这个类名准确的沿用下来，并不需要再添加其它的样式定义。接下来我们为四张图片先定义一个外围容器：
在往这个容器中添加图片之前，先对它进行一些样式定义：
.gallery {
background:#efefef;
margin:0px 0px 10px 0px;
padding:5px;
}
很好理解的几个属性，在这里就不解释了，现在我们重点来看看它里面的四张图片我们应该怎么添加。首先根据之前的经验，毫无疑问这四张图片的标签结构是一模一样的，一个确定下来之后，就只要简单的复制四个就行了。若把四张图片的容器看成是一个整体，我们可以考虑用无序列表来实现，每张图片及其说明文本代表着一个列表项。这种思路是可行的，而且也可以从之前的教程中找到一些实现思路。但是为了更加体现教程的意义，我这里不使用列表来实现，而是用四个DIV子容器，单个子容器的结构如下：
Caption 1
这里的话我没有把文本说明放到链接标签中，也就是说链接的触发区域仅以图像为基础。这样的一组HTML标签我们把它放置到gallery容器中，因为有四张图片，只要把上面的代码复制一下，修改其中相应的图片路径和文本说明就可以了。教程中复制后的代码就不贴了，密密麻麻的看着头痛，思路对了就不会有问题。添加完四个box子容器后，预览效果如下：
接下来就是CSS的工作了。首先看一下类样式box中的CSS定义：
.gallery .box {
height:100px;
float:left;
width:42%;
padding:10px 5px 5px 5px;
margin:8px;
background:#fff;
text-align:center;
}
高度值稍微估计一下，只要能容纳下图片以及说明文本的高度之和就行了。因为四个box容器都是块级对象，应用了float属性之后，就会在父容器宽度允许的前提下，依次从左到右排列，直到父容器宽度不够时，才会重新起行。现在我们要将四张图片控制成两行两列的布局，只要让两个box容器的宽度之和差不多将gallery容器的宽度塞满就可以了。CSS中采用了百分比形式的宽度设定，怎么计算出来的？仔细研究一下应该能看懂：
（415-2×5-4×5-4×8）/2/415 = 42.53%
这个时候先不要急着往下做，网页的效果在火狐浏览器中是正常的，但是在IE6中呢？
侧边栏被挤到下面去了！问题出在哪里？仔细观察一下火狐和IE6中的网页，你会发现两者在下图所示的间隔距离上存在很明显的差别：
出现这个现象的根源在于IE6中很经典的双Margin错误，在上面的图示中，样式.gallery里设置的5像素填充加上.box里设置的8像素边界，火狐解析出来的13像素间隔是正确的，而IE6把.box里设置的边界加倍了，才得出21像素的间隔。解决这个问题的途径有很多，我们可以使用简单的Hack来实现兼容，在样式.box的最后位置加入：
.gallery .box {
... ...
_margin:8px 8px 8px 4px;
}
除了变动左侧边界的数值之外，还要注意margin规则前面的_符号，这样的语法IE6会当作正常的边界属性来解析，从而覆盖之前的magin规则。而火狐浏览器则会无视这条带有_符号的CSS规则，仍然保持之前正常的浏览效果。
接下来对box中的图片定义一些CSS：
.box img {
background:#efefef;
padding:5px;
border:solid 1px #cccccc;
}
然后设置鼠标经过图像时，变化边框颜色：
.box a:hover img {
border:solid 1px #000000;
}
效果如下图所示：
从上面那张图中我们也顺便来看一下还有哪些地方需要调整。第一个是说明文本的位置，它应该处于图片的下方，也就是说它不能紧跟在图片后面，而应该重新起行。看到“重新起行”几个字应该知道怎么做了吧：
.box .caption {
display:block;
}
第二个需要校正的就是gallery容器的高度自适应问题，在效果图中可以看到，由于其内部元素的浮动，gallery容器的高度没有根据内容的高度进行扩展，只剩下了padding填充所占据的高度。这里就是所谓的浮动清除问题，我们只需要在针对gallery的样式中添加一行：
.gallery {
... ...
overflow:auto;
}
当然清除浮动的方法有很多，也可以利用添加额外标签并设置clear属性来实现，额外标签可以是DIV、SPAN甚至是BR断行标签都可以，当然要以不破坏现有布局为前提。