无序列表Clearfix
我有一个无序列表，每个列表元素包含一张照片和一个标题。 我的CSS设置网格为一个网格，其中每行包含三张照片。 有时标题（或照片标题）比照片的宽度更长，并且必须跨越两行。 在某些情况下，当文本跨越2+行时，它下面的列表元素被推到右边，列表中有一个很大的差距。 唯一适用于我的解决方案是在每三个<li></li>元素之后添加以下HTML <div style="clear:both"></div> 。 这个问题可以在列表元素的第三行中看到。 我试过研究这个问题，但还没有找到一个只有CSS的方法。 在我的示例代码中，我应用了CSS clearfix类，但它似乎没有任何效果。
我正在使用Google Chrome的最新版本。
这是我的代码：http://jsfiddle.net/NVveP/1/
同时float: left和display: inline-block将实际上使display: inline-block无效，因为float: left display: block 。
因此，删除float: left允许display: inline-block工作，它与vertical-align: top结合使用可以实现所需的布局。
请参阅： http : //jsfiddle.net/thirtydot/NVveP/3/
我还添加了一个黑客来进行display: inline-block IE7中的display: inline-block工作，如果这很重要的话。
用花车来做这件事会更困难。 您需要做以下事情：
li:nth-child(3n+1) {
clear: both;
}
这有问题在IE7 / 8等旧版浏览器中不起作用。 幸运的是，不需要担心这个问题，因为display: inline-block是这里的解决方案，不是浮动的。