【CSS 布局】-多列布局
warning:
这篇文章距离上次修改已过192天，其中的内容可能已经有所变动。
CSS 多列布局可以使用 column 相关属性来实现。以下是一些常用的属性：
column-count：定义列数。column-gap：定义列与列之间的间隙。column-rule：定义列之间的分隔线（类似于边框的样式）。
示例代码：
.multi-column {
column-count: 3; /* 定义列数为3 */
column-gap: 20px; /* 列与列之间的间隙为20px */
column-rule: 1px solid #ccc; /* 列之间的分隔线样式 */
}HTML 代码：
<div class="multi-column">
<p>
这里是一些文本内容，将会被自动分布到三列中。
可以包含任意文本内容，并且能够根据浏览器窗口大小自动调整列的数量。
</p>
</div>在上述示例中，.multi-column 类应用于一个 <div> 元素，该元素中包含一个 <p> 元素，其中包含文本内容。这段文本内容将会被分布到三列中，列与列之间的间隙为20px，列之间的分隔线颜色为灰色。
评论已关闭