html - 无序列表

Question

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

我使用的是最新版本的谷歌浏览器。

这是我的代码: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 中工作。

用 float 做这个会比较困难。您需要达到以下效果:

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

存在IE7/8等老浏览器无法运行的问题。幸运的是，无需担心这一点，因为 display: inline-block 是这里的解决方案，而不是 float 。