5列，2列是边缘顶部:高度

Question

我在一个容器中有 5 列，我想要 2 列边距顶部：50p;其他 3 列仍然保持顶部。而不是跟随其他人。

.container {
    width: 960px;
    margin: 0 auto;
    background-color: #fff;
}
.column {
    width: 19%;
    height: 100px;
    display: inline-block;
    background-color: #039BE5;
}
.margin {
    margin-top: 50px;
}

<div class="container">
    <div class="column"></div>
    <div class="column margin"></div>
    <div class="column"></div>
    <div class="column margin"></div>
    <div class="column"></div>
</div>

Answer 1

默认情况下，内联元素在基线上垂直对齐。只需将列的垂直对齐方式更改为文本顶部即可。

.column {
    width: 19%;
    height: 100px;
    display: inline-block;
    background-color: #039BE5;
    vertical-align: text-top;
}