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为网格布局

回答

相关问题