Question

我想允许li项具有相同的宽度但不同的高度可能包括图像和文本。问题是当我向左浮动，或显示：inline-block，并且其中一个项目超出了高度。它扰乱了内容的视觉风格。有什么办法可以解决这个问题吗？

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

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

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

Genny Website

Answer 1

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

+1 Masonry答案，我只是想解释它是如何运作的。

Answer 2

jQuery Masonry将是你在这里寻找的东西，本质上，如果没有一些不太理想的代码，li将永远不会碰到它们之上的那个，但jQuery插件使它变得非常简单。 / p>

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标签。

不同高度的物品

3 个答案: