CSS-等高列？

Question

在CSS中，我可以执行以下操作：

但我不知道如何将其更改为：

CSS有可能吗？

如果是，如何在不显式指定高度的情况下做到这一点（让内容增加）？

Answer 1

弹性盒

假设这种布局：

<div class="row">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
</div>

对于flexbox，等高列只是一个声明：

.row {
    display: flex; /* equal height of the children */
}

.col {
    flex: 1; /* additionally, equal width */
}

表格布局

如果仍然需要支持IE 8或9，则必须使用表布局：

.row {
    display: table;
}

.col {
    display: table-cell;
    width: 33.33%; /* depends on the number of columns */
}