|
如下图：像这种列表布局我们一般用 float:left; 设置宽度和高度就OK了。
但是，如果高度不同或者文字字数不同呢，再用float:left;布局就全乱了。如下图：
现在，我们可以利用display:inline-block;完美的解决这个问题。如下图：
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* { margin:0; padding:0; }
ul { list-style:none; font-size:0; }
li { display:inline-block; *display:inline; zoom:1; width:200px; font-size:14px; vertical-align:top; }
</style>
</head>
<body>
<ul>
<li>
<img src="http://static.cnblogs.com/images/logo_small.gif" alt="">
<p>代码改变世界</p>
</li>
<li>
<img src="http://static.cnblogs.com/images/logo_small.gif" alt="">
<p>代码改变世界</p>
<p>代码改变世界</p>
</li>
<li>
<img src="http://static.cnblogs.com/images/logo_small.gif" alt="">
<p>代码改变世界</p>
</li>
<li>
<img src="http://static.cnblogs.com/images/logo_small.gif" alt="">
<p>代码改变世界</p>
</li>
<li>
<img src="http://static.cnblogs.com/images/logo_small.gif" alt="">
<p>代码改变世界</p>
</li>
<li>
<img src="http://static.cnblogs.com/images/logo_small.gif" alt="">
<p>代码改变世界</p>
<p>代码改变世界</p>
</li>
<li>
<img src="http://static.cnblogs.com/images/logo_small.gif" alt="">
<p>代码改变世界</p>
</li>
<li>
<img src="http://static.cnblogs.com/images/logo_small.gif" alt="">
<p>代码改变世界</p>
</li>
<li>
<img src="http://static.cnblogs.com/images/logo_small.gif" alt="">
<p>代码改变世界</p>
</li>
<li>
<img src="http://static.cnblogs.com/images/logo_small.gif" alt="">
<p>代码改变世界</p>
<p>代码改变世界</p>
</li>
<li>
<img src="http://static.cnblogs.com/images/logo_small.gif" alt="">
<p>代码改变世界</p>
<p>代码改变世界</p>
<p>代码改变世界</p>
<p>代码改变世界</p>
</li>
<li>
<img src="http://static.cnblogs.com/images/logo_small.gif" alt="">
<p>代码改变世界</p>
</li>
<li>
<img src="http://static.cnblogs.com/images/logo_small.gif" alt="">
<p>代码改变世界</p>
</li>
<li>
<img src="http://static.cnblogs.com/images/logo_small.gif" alt="">
<p>代码改变世界</p>
</li>
<li>
<img src="http://static.cnblogs.com/images/logo_small.gif" alt="">
<p>代码改变世界</p>
</li>
<li>
<img src="http://static.cnblogs.com/images/logo_small.gif" alt="">
<p>代码改变世界</p>
</li>
</ul>
</body>
</html>
复制代码
1、ul { list-style:none; font-size:0; } font-size:0; 是为了去掉 <li>之间由于换行而产生的3px的间距。当然了，解决这个问题方法不只一个，比如：也可以用margin-right:-3px;解决。
2、由于ie6、7不支持display:inline-block， 所以我们用*display:inline; zoom:1;解决这个问题。
知识扩展：http://www.zhangxinxu.com/wordpress/?p=2357
http://ued.alipay.com/wd/2008/10/29/%E5%9F%BA%E4%BA%8Edisplaytable%E7%9A%84css%E5%B8%83%E5%B1%80/
|