li不同高度的項目

我想允許li項目具有相同的寬度但高度不同，可能包含圖像和文本。問題是當我浮動左，或顯示：內聯塊，並且其中一項超過了高度。它擾亂了內容的視覺風格。有什麼方法可以管理這個？li不同高度的項目

我想李遵循一個簡單的規則爲

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

的例子網站，其中包括同樣是

Genny Website

來源

2012-08-02 themajiks

向我們展示您的HTML請。 – Lowkase 2012-08-02 20:29:41

Genny網站使用絕對位置來獲得理想的效果。我不確定您是否可以在不使用某些javascript技巧的情況下執行此操作。 @邁克爾彼得森的答案可能是最簡單的解決方案與JavaScript。 – travis 2012-08-02 20:33:15

jQuery Masonry將是你在找什麼在這裏，由自然，li's永遠不會碰到上面的代碼，而沒有一些不太理想的代碼，但是jQuery插件使它非常簡單。

來源

2012-08-02 20:30:10

因爲這沒有標記爲jQuery，你應該鏈接到http://vanilla-masonry.desandro.com/ – Bergi 2012-08-02 20:34:33

爲更正Bergi的乾杯:) Upped。 – 2012-08-02 20:42:51

我認爲你需要創建三列。例如：

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

來源

2012-08-02 20:30:44

好的，我喜歡Alexander Wigmore的回答 – 2012-08-02 20:32:40

像genny.com和pinterest.com這樣的網站不會浮動它們的元素，而是將它們絕對定位，並通過JS動態設置它們的left和top值。首先，他們獲取頁面上元素的數量。其次，他們嗅探了元素的height和width。第三，他們更改了left和top CSS值。

+1爲Masonry答案，我只是想解釋它是如何工作的。

來源

2012-08-02 20:37:43

+1的解釋應該是... – Bergi 2012-08-02 20:45:12

li不同高度的項目

回答

相關問題