哈哈小老虎's Blog

浮动有个比较有趣的问题: 当被浮动的元素排列成多行时(多于1行)，如果它们的高度不相同，则整个布局会被打乱(浮动布局崩溃的demo)。但有的时候，需要高度自适应，这个时候，浮动已无法胜任，也许你想到了表格，但从语义的角度来看，表格不一定适用，我想到了inline-block…

一. 解决办法

<ul>
	<li>我是第一个</li>
	<li>我是第二个我是第二个我是第二个我是第二个我是第二个我是第二个我是第二个</li>
	<li>我是第三个</li>
	<li>我是第四个</li>
	<li>我是第五个</li>
	<li>我是第六个</li>
</ul>
<style>
        ul {
	     width: 630px;
	     margin: 10px auto;
	     overflow: hidden;
        }
        ul li {
             /* FF 2及更低版本不作考虑 */
	     display: inline-block;
	     width: 200px;
             /* 我打算设置10px的右边距, 但非IE下, inline-block后, 元素已默认带有4px的右边距 */
	     margin: 10px 6px 0 0;
	     vertical-align: top;
	     background: #ccc;
	     *display: inline;
	     *zoom: 1;
	     *margin-right: 10px;
        }
</style>

自适应高度的demo>>

二. 说明

1. 非IE下，将块元素设置为inline-block后，会带有4px的右边距，IE下则不会有；

2. 设置inline-block后，需要同时将元素设置为顶端对齐，否则，当同一行中的某个元素，高度大于该行中的其他元素时，会导致这些元素在垂直方向上下移。