CSS - Equal Height Columns?

Question

CSS有可能吗？

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

Answer 1

Flexbox

假设这种布局：

<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 */
}

浏览器支持：http : //caniuse.com/flexbox ;

Table layout

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

.row {
    display: table;
}

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