Question

我尝试在页面上使用某种网格布局：

<ul>
<li>blabla</li>
<li>bla bla bla bla bla</li>
...
</ul>

风格：

li {
  width: 100px;
  display: inline-block;
  float: left
}

当li中的元素比其他元素长时，会出现问题。我在某个时刻有一个高度为每个项目（300px），但如果在一行上所有元素都是100px，那么下一行将有200 px的间隙。

所以不知怎的，我希望与table具有相同的效果：在一行上，高度是最高项目的高度，与这个ul / li的东西混合在一起，与表格的数字相反列和线是固定的。

你知道怎么做吗？如果可能的话，纯html / css（html5 / css3 ok）和没有库

http://jsfiddle.net/mF24t/9/

谢谢！

Answer 1

您可能希望在display:table-cell上使用li：

请参阅演示小提琴： http://jsfiddle.net/abhitalks/mF24t/4/

li {
    width: 100px;
    display: table-cell;
    border: 1px solid gray;
    padding: 2px;
}

<强>更新：

变体2 ： http://jsfiddle.net/abhitalks/mF24t/13/

使用float:left（正如您坚持使用的那样）并清除浮动说每5项。仅使用border-top来提供类似外观的虚假表格。在小提琴中，虚线表示实际高度（可以通过最小高度控制）。

li {
    width: 100px;
    border: 1px dotted #ddd;
    border-top: 1px solid gray;
    padding: 2px;
    display: table-cell;
    float: left;
}
li:nth-child(5n+1) {
    clear: left;
}

变体3 ： http://jsfiddle.net/abhitalks/wdbye/3/

如果可以，请使用flex-box。检查http://caniuse.com，看看你能否负担得起。这将为您提供您想要的灵活高度。

ul {
    display: flex;
    flex-flow: row wrap;
}

注意：除了上面提到的想法之外，没有其他方法可以根据内容和表格布局自动缩放高度。

如何设置列表的样式，使其看起来像一个表，具有不同的行高？

1 个答案: