html – 网格布局的UL CSS

发布时间：2020-12-14 21:36:48 所属栏目：资源来源：网络整理

导读：我有一个服务器生成的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 所有的块已知宽度为200像素和未知高度。我想要 li像这样排列成桌子般的时尚：

我有一个服务器生成的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>

所有的块已知宽度为200像素和未知高度。我想要< li>像这样排列成桌子般的时尚：

我现在所在的是以下css：

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

一切都很好，除了列没有得到相等的高度。而在上面的例子中，#4的“#”抓住了这个例子，结果并不是我想要实现的：

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

解决方法

Inline blocks可能在这里很有用。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!