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