用于网格布局的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>

所有块都知道宽度为200px且未知高度。我希望<li>以类似于表格的方式排列：

我现在所拥有的是关注css：

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

一切都很好，只是列没有达到相同的高度。在上面的例子中，第4块“抢夺”＃1，结果不是我想要实现的目标：

是否有任何纯CSS跨浏览器方式允许我想要的网格布局并且不会强制执行标记更改？

Answer 1

Inline blocks在这里也许有用。

Answer 2

在您的示例中，您似乎希望为每行提供该行中最大li的相同高度。如果这个高度是可变的，那么只有nth-child才能实现：

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

Answer 3

选项1：给予他们明确的高度

选项2：使用nth-child（支持有限）