用于网格布局的UL+CSS
用于网格布局的UL+CSS
提问于 2010-04-26 17:36:23
我有一个服务器生成的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跨浏览器的方式，可以实现我想要的网格布局，而不会强制改变标记？
回答 3
Stack Overflow用户
回答已采纳
发布于 2010-04-26 17:48:46
在这里，Inline blocks可能会很有用。
Stack Overflow用户
发布于 2010-04-26 17:45:43
在您的示例中，您似乎希望为每一行提供该行中最大的li的相同高度。如果这个高度是可变的，那么你想要的只有第n个孩子才有可能：
li:nth-child(3n+0) { clear: left; }Stack Overflow用户
发布于 2010-04-26 17:38:48
选项1:给他们明确的高度
选项2:使用nth-child (支持有限)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2712350
复制相关文章
相似问题