CSS 垂直对齐容器中的块

Question

有什么方法可以将所有 .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*/
}

CSS 垂直对齐容器中的块

CSS vertical align block in a container

html

css

vertical-alignment