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標簽。