CSS布局教程：如何用CSS构建图片、文字混排的产品展示？_DIV+CSS实例

　　有朋友在QQ上问我一个关于CSS的问题，一个产品展示页，有产品图片与产品名称，如何用CSS布局来实现，下面谈谈我的观点以及提出我的方法，大家可以讨论，如有不当，请大家在MB5U.com上评论或留言指出来，大家共同进步。

　　从事网页设计工作的朋友应该有过很多这样的案例，上面放置企业的产品图片，下面放置产品的名字，点击图片或产品名字可以查看产品的具体资料。当然，这样的形式，在其它网站上也经常出现，例如图片新闻、写真壁纸站等等。我们看效果图片（可点击放大）：


　　首先我们分析一下，这样的形式每一组是类似的：上部一个图片链接，下部一个文字链接，然后重复。进行适应的排列即可。我们可以将它们看作是一组无序列表的列表项，而一页中的所有产品即是一个无序列表。

　　每一个列表项，包含了一张图片并进行链接，文字链接。我们用CSS对图片与文字进行适当的控制，即可实现这样的效果。然后让每一个列表项进行浮动，让它们一行三个，并且在三个列表项水平居中对齐于整个无序列表。

　　好了，废话不多说了，上面的思路基本清楚了，我们开始HTML代码的编写：


　　我们建立了一个无序列表，ID为products。每一个列表项包括了一个图片链接，一个文字链接，为了便于CSS进行控制，我们将文字链接放置在span中。

　　下面我们开始CSS代码的编写：


　　CSS整体布局声明：边距与填充均为零，12px的文字大小，黑色的文字，去除文字装饰线（即定义链接文字无下划线）。


　　定义无序列表的宽度为582px，关于这个数值的由来我们在下面会有说明，上下边距为50px，左右边距为自动，实现UL的水平居中对齐。


　　定义无序列表的列表项的样式，即一组“产品图片”和“文字名称”：宽度为154px，高度为154px，向左浮动，左边距为30px。为了消除双倍边距的bug，我们设置display:inline;。我们一行是三组内容，共有四个边距，154*3 30*4=582。这就是整个无序列表宽度的由来，看下面的示例图片（可点击放大）：



　　设置链接均为块元素。轻易进行控制，而且设为块元素以后，增大了鼠标悬停的区域，提高用户体验。
　　设置链接图片的边框为1px的实线，颜色为深灰色。设置填充为1px，让边线与图片之间产生一象素的空隙。


　　这些代码是对链接文字的样式定义，宽度和高度是154px、30px。行高为24px，文字居中对齐。我们来看看现在的效果！

　　或许你认为我们的工作已经结束了，图片及文字已经按预定的方式上下排列，而且整个页面看上去还不错。但我们需要注重，或许文字并不是固定的，或许是三个字，或许是十五个字，假如文字过多，会产生什么样的后果呢？（可点击放大）


　　晕倒！文字将li挤走了，一切都走样了。你会想到可以用ASP脚本来控制读取的文字数量，或许这并不是什么好主意，我们完全可以通过CSS来搞定它，我们的链接是块元素，我们可以设置文字超出宽度154px的时候，自动的隐藏，并且在IE中可以实现省略号的效果，我们在#products li span a增加以下代码：


　　我们再来看看效果！现在就不会出现破坏布局的情况了！
　　欢迎大家参与讨论，说说你的看法，这样的形式如何制作最合理科学！