UL + CSS爲網格佈局

Question

我有一服務器生成的HTML類似：

<ul> 
    <li><!-- few nested elements that form a block --></li> 
    <li><!-- few nested elements that form anaother block --></li> 
    <li><!-- etc, X times --></li> 
</ul> 

的所有塊具有已知的寬度200像素和未知的高度。我想<li>被安排在類似表格的方式是這樣的：

我對現在下面的CSS：

li { 
    display: block; 
    width: 200px; 
    float: left; 
    margin: 10px; 
} 

一切都只是列不得到同等罰款高度。和上面的例子塊＃4「搶食」的＃1和結果不是我想要實現：

有沒有純CSS跨瀏覽器的方式，將允許電網我想要的佈局，不會強制標記更改？

Answer 1

Inline blocks或許會有幫助。

Answer 2

選項1：給他們明確的高度

選項2：使用nth-child（具有有限支持）

Answer 3

在你的榜樣，你似乎想給每一行中，最大的鋰相同的高度行。如果這個高度是可變的，你想要的是僅與第n個孩子可能：

li:nth-child(3n+0) { clear: left; }