容器中的 CSS 垂直对齐 block

Question

fiddle

有什么方法可以将所有 .col 对齐到顶部，以匹配上面 sibling 的高度？

Answer 1

这是我当前的解决方案，用于保持相同的高度和宽度。

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

.row {
    display: flex; /* assigns equal height to all the children */
}

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

这是针对IE8,9等浏览器向后支持的解决方案:

.row {
    display: table;
}

.col {
    display: table-cell;
    width: 50%; /* depends on the number of columns, 50% for two col, 25% for four column and so on*/
}