我有一个服务器生成的 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 跨浏览器方式允许我想要的网格布局并且不会强制更改标记?
最佳答案
Inline blocks在这里可能会有用。
关于html - 网格布局的UL+CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2712350/