李不同高度的物品

li items of different height

本文关键字：高度 李不同      更新时间：2023-09-26

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

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

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

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

Genny网站

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

+1对于Masonry的答案，我只是想解释一下它是如何工作的。

jQuery Masonry将是您在这里寻找的东西，从本质上讲，如果没有一些不太理想的代码，li永远不会真正达到上面的版本，但jQuery插件使它变得非常简单。

我认为您需要创建三列。类似于：

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

相关文章：