无序列表Clearfix

Question

我有一个无序列表，每个列表元素都包含一张照片和一个标题。我的CSS将网格设置为网格，其中每行包含三张照片。有时标题(或图片标题)比照片的宽度还要长，必须跨两行。在某些情况下，当文本跨越2+行时，它下面的列表元素会被推到右边，列表中会有一个很大的间隙。对我来说唯一有效的修复方法是在每三个<li></li>元素之后添加以下HTML <div style="clear:both"></div>。这个问题可以在列表元素的第三行中看到。我试着研究这个问题，但没有找到一个只有CSS的方法。在我的示例代码中，我应用了CSS clearfix类，但它似乎没有任何效果。

我使用的是最新版本的Google Chrome。

下面是我的代码：http://jsfiddle.net/NVveP/1/

Answer 1

同时拥有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/

如果有必要的话，我还添加了一个hack来让display: inline-block在IE7中工作。

使用浮点数来实现这一点会更加困难。你需要一些东西来达到以下效果：

li:nth-child(3n+1) {
    clear: both;
}

幸运的是，没有必要担心这一点，因为display: inline-block是这里的解决方案，而不是浮动。