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

内联块可能在这里很有用.