Html 用于网格布局的 UL+CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2712350/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
UL+CSS for grid layout
提问by nkrkv
I have a server-generated html like:
我有一个服务器生成的 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>
All blocks have known width 200px and unknown height. I want <li>to be arranged in table-like fashion like this:
所有块都有已知的宽度 200px 和未知的高度。我想像<li>这样像桌子一样排列：
What I have for now is following css:
我现在所拥有的是遵循 css：
li {
display: block;
width: 200px;
float: left;
margin: 10px;
}
All is fine except that columns don't get equal height. And in example above block #4 “snatch” at #1 and the result isn't what I'm trying to achieve:
一切都很好，只是列的高度不同。在上面的示例中，#4 块在 #1 处“抢夺”，结果不是我想要实现的：
Is there any pure-CSS cross-browser way that will allow grid layout I want and will not enforce markup change?
是否有任何纯 CSS 跨浏览器方式可以允许我想要的网格布局并且不会强制更改标记？
回答by Boldewyn
Inline blockscould perhaps be useful here.
内联块在这里可能有用。
回答by Tomas
In your example you seem to want to give each row the same height of the largest li in that row. If this height is variable what you want is only possible with nth-child:
在您的示例中，您似乎希望每一行都具有该行中最大 li 的相同高度。如果这个高度是可变的，你想要的只有第 n 个孩子才有可能：
li:nth-child(3n+0) { clear: left; }
