在每一行之后垂直对齐 div 开始新列 - CSS

在网页设计中，经常需要在每一行之后垂直对齐 div 开始新列，这样可以让页面看起来更加整洁和美观。CSS 提供了许多方法来实现这个需求，本文将介绍其中几种常见方法。

1. 使用 float

使用 float 可以将 div 元素浮动到左边或右边，从而实现多列布局。需要注意的是，浮动元素会脱离文档流，可能会影响布局，因此需要清除浮动。以下是示例代码：

.column {
    float: left;
    width: 33.33%;
}
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

<div class="clearfix">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>

在上面的代码中，使用了三个宽度为 33.33% 的浮动列和一个 clearfix 清除浮动。

2. 使用 display: inline-block

通过设置 div 元素的 display 属性为 inline-block，可以使其在同一行内显示，从而实现多列布局。以下是示例代码：

.column {
    display: inline-block;
    width: 33.33%;
    vertical-align: top;
}

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

在上面的代码中，使用了三个宽度为 33.33% 的 inline-block 列，并设置了垂直对齐方式为顶部。

3. 使用 flexbox

使用 flexbox 可以更加方便地实现多列布局，而且不需要清除浮动或设置行内块元素。以下是示例代码：

.container {
    display: flex;
    flex-wrap: wrap;
}
.column {
    width: 33.33%;
}

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

在上面的代码中，使用了一个 flexbox 容器和三个宽度为 33.33% 的列。flex-wrap 属性设置为 wrap，表示当一行中的元素超出容器宽度时，自动换行。

以上是三种常见的方法，根据实际需求选择适合自己的方式即可。GitHub 上有一个 demo 可以参考实现效果。