javascript - li 不同高度的物品

Question

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

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

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

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

珍妮网站

Answer 1

Sites like genny.com and pinterest.com do NOT float their elements, but rather position them absolutely and set their left and top values dynamically through JS. First, they grab the count of elements on the page. Second, they sniff the height and width of the elements. Third, they change the left and top CSS values.

+1 for the Masonry answer, I just wanted to explain how it works.

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