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

所有 block 的宽度已知为 200px，高度未知。我要<li>像这样以表格形式排列:

我现在拥有的是以下 css:

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

除了列的高度不相等外，一切都很好。在上面的示例中， block #4 在 #1 处“抢夺”，结果不是我想要实现的:

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

Answer 1

Inline blocks在这里可能会有用。