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

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

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

Answer 3

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

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