UL + CSS爲網格佈局

我有一服務器生成的HTML類似：UL + CSS爲網格佈局

<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>被安排在類似表格的方式是這樣的：

alt text

我對現在下面的CSS：

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

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

alt text

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

來源

2010-04-26 nkrkv

Inline blocks或許會有幫助。

來源

2010-04-26 09:48:45 Boldewyn

+1，但介意IE7，只允許內聯塊自然內聯元素。 – ANeves 2010-04-26 10:01:50

偉大的鏈接！正是我需要的。 – nkrkv 2010-04-26 10:37:58

您很可能會遇到內聯空白問題。在這種情況下，請在doctype.com上查看此主題：http://doctype.com/csss-inlineblock-white-space-between-items – Boldewyn 2010-04-26 13:58:48

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

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

來源

2010-04-26 09:38:48 Quentin

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

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

來源

2010-04-26 09:45:42 Tomas

UL + CSS爲網格佈局

回答

相關問題