2

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

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

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

4

1 回答 1

4

两者兼而有之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/

如果这很重要，我还添加了一个 hack 以display: inline-block在 IE7 中工作。

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

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

哪个有在IE7 / 8等旧浏览器中不起作用的问题。幸运的是，无需担心这一点，因为这display: inline-block是解决方案，而不是浮动。

于 2012-06-20T09:24:16.337 回答