列表項與交錯高度messing行

Question

我有一個列表中的項目具有交替高度基於內容的問題。這會導致行如下所示中斷：http://jsfiddle.net/PYRGb/嘗試重新調整顯示視圖的大小以查看效果。

理想情況下，我希望列表項繼續到下一行，並且空間足以在沒有碰到上述行的邊緣的情況下形成一行。這可能嗎？

• 我知道我必須提到的「行」和一張桌子可能是一個解決方案，但我 現在用列表來顯示液體和適應性保持一定範圍的 設備。

• 唯一能做的我已經找到是設置min-height，我敢肯定 內容不會溢出就像這樣：http://jsfiddle.net/PYRGb/1/但我 真的無法預測的內容的數量，在列表中的項目和 希望列表項儘可能調整高度。

編輯：剛一說明，如果你看到的調整顯示有3列，你可以看到我需要的效果，但它並沒有在其他情況下工作。 （如果不知道這是在所有的瀏覽器，我使用Chrome 26相同）

感謝

Answer 1

去除浮動，並讓李顯示器與垂直對齊頂部inline-block的。

http://jsfiddle.net/stevendwood/PYRGb/2/

ul li{ 
    width: 100px; 
    padding: 10px; 
    margin: 0 0 20px 20px; 
    border: 1px solid red; 
    background: #eaeaea; 
    display: inline-block; 
    vertical-align: top; 
} 

您可以垂直對齊設置爲中等或任何你喜歡的。