有朋友在QQ上问我一个关于CSS的问题，一个产品展示页，有产品图片与产品名称，如何用CSS布局来实现，下面谈谈我的观点以及提出我的方法，大家可以讨论，如有不当，请大家评论或留言指出来，大家共同进步。
从事网页设计工作的朋友应该有过很多这样的案例，上面放置企业的产品图片，下面放置产品的名字，点击图片或产品名字可以查看产品的详细资料。当然，这样的形式，在其它网站上也经常出现，例如图片新闻、写真壁纸站等等。我们看效果图片（可点击放大）：
首先我们分析一下，这样的形式每一组是类似的：上部一个图片链接，下部一个文字链接，然后重复。进行适应的排列即可。我们可以将它们看作是一组无序列表的列表项，而一页中的所有产品即是一个无序列表。
每一个列表项，包含了一张图片并进行链接，文字链接。我们用CSS对图片与文字进行适当的控制，即可实现这样的效果。然后让每一个列表项进行浮动，让它们一行三个，并且在三个列表项水平居中对齐于整个无序列表。
好了，废话不多说了，上面的思路基本清晰了，我们开始HTML代码的编写：
Example Source Code [www.52css.com]
标题的位置
标题的位置
……以下省略
我们建立了一个无序列表，ID为products。每一个列表项包括了一个图片链接，一个文字链接，为了便于CSS进行控制，我们将文字链接放置在span中。
下面我们开始CSS代码的编写：
Example Source Code [www.52css.com]
* {
margin:0;
padding:0;
font-size:12px;
color:#000;
text-decoration:none;
}
CSS整体布局声明：边距与填充均为零，12px的文字大小，黑色的文字，去除文字装饰线（即定义链接文字无下划线）。
Example Source Code [www.52css.com]
#products {
width:582px;
margin:50px auto;
}
定义无序列表的宽度为582px，关于这个数值的由来我们在下面会有说明，上下边距为50px，左右边距为自动，实现UL的水平居中对齐。
Example Source Code [www.52css.com]
#products li {
width:154px;
height:154px;
float:left;
margin-left:30px;
display:inline;
}
定义无序列表的列表项的样式，即一组“产品图片”和“文字名称”：宽度为154px，高度为154px，向左浮动，左边距为30px。为了消除双倍边距的bug，我们设置display:inline;。我们一行是三组内容，共有四个边距，154*3+30*4=582。这就是整个无序列表宽度的由来，看下面的示例图片（可点击放大）：
Example Source Code [www.52css.com]
#products li a {
display:block;
}
#products li a img {
border:1px solid #666;
padding:1px;
}
设置链接均为块元素。容易进行控制，而且设为块元素以后，增大了鼠标悬停的区域，提高用户体验。
设置链接图片的边框为1px的实线，颜色为深灰色。设置填充为1px，让边线与图片之间产生一象素的空隙。
Example Source Code [www.52css.com]
#products li span a {
width:154px;
height:30px;
line-height:24px;
text-align:center;
}
这些代码是对链接文字的样式定义，宽度和高度是154px、30px。行高为24px，文字居中对齐。我们来看看现在的效果！
或许你认为我们的工作已经结束了，图片及文字已经按预定的方式上下排列，而且整个页面看上去还不错。但我们需要注意，或许文字并不是固定的，或许是三个字，或许是十五个字，如果文字过多，会产生什么样的后果呢？（可点击放大）
晕倒！文字将li挤走了，一切都走样了。你会想到可以用ASP脚本来控制读取的文字数量，或许这并不是什么好主意，我们完全可以通过CSS来搞定它，我们的链接是块元素，我们可以设置文字超出宽度154px的时候，自动的隐藏，并且在IE中可以实现省略号的效果，我们在#products li span a增加以下代码：
Example Source Code [www.52css.com]
white-space:nowrap;
text-overflow:ellipsis;
overflow: hidden;
我们再来看看效果！现在就不会出现破坏布局的情况了！
欢迎大家参与讨论，说说你的看法，这样的形式如何制作最合理科学！
本站公告 
CSS排版