li不同高度的物品

Question

我想允许li项目具有相同的宽度，但可以包含图像和文本的不同高度。 问题是当我向左浮动或显示：行内块，且其中一项超过高度时。 它扰乱了内容的视觉风格。 有什么办法可以管理这个吗？

我希望李遵循一个简单的规则

li {
    float:left;
    display:list-item;
    width:200px;
    background:#CCC;
    height:auto;
    padding:10px;
    margin:0 10px 10px 0;
}

包含相同内容的示例网站是

Genny网站

Answer 1

诸如genny.com和pinterest.com之类的网站不会浮动其元素，而是绝对定位它们，并通过JS动态设置其left和top限值。 首先，他们获取页面上元素的数量。 其次，它们嗅探元素的height和width 。 第三，它们更改left和top CSS值。

+1对砌体建筑的回答，我只是想解释一下它是如何工作的。

Answer 2

jQuery Masonry将是您在这里寻找的东西，自然而然，如果没有一些不受欢迎的代码，li永远不会真正超越他们之上的人，但是jQuery插件使其非常简单。

Answer 3

我认为您需要创建三列。 就像是：

<ul id="first column">
    <li>Some content</li>
    <li>Some content</li>
   . . .
</ul>
<ul id="second column">
    <li>Some content</li>
    <li>Some content</li>
   . . .
</ul>
<ul id="third column">
    <li>Some content</li>
    <li>Some content</li>
   . . .
</ul>

然后，您不必浮动li标签。