CSS垂直对齐块在容器中

Question

fiddle

是否可以将所有.col对齐到顶部，与上面兄弟姐妹的身高相匹配？

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