小编典典

CSS - Equal Height Columns?

html

CSS有可能吗?

如果是,如何在不显式指定高度的情况下做到这一点(让内容增加)?


阅读 466

收藏
2020-05-10

共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 */
}
2020-05-10