IT课程 CSS基础 030_多列布局 Columns

多列布局 Columns

Columns（列）是一种用于在文本布局中创建多列的属性。通过设置容器的列数和列宽，实现文本内容在多列之间自动流动。Columns（列）并非适用于所有类型的内容，主要用于处理文本内容的多列布局，而不是用于整个页面的布局。

column-count：指定列的数量。
column-width：指定每列的宽度。
column-gap：指定列之间的间隙。
column-rule：设置列之间的规则线（分隔线）。

示例：

1
.example{
2
    column-count: 3;
3
    /* column-width: 200px; */
4
    column-gap: 20px;
5
    column-rule: 1px solid red;
6
}
7
p {
8
    margin: 0 0 10px;
9
}

1
    <div class="example">
2
        <p>这是一个段落111，这是一个段落111，这是一个段落111。</p>
3
        <p>这是一个段落222，这是一个段落222，这是一个段落222。</p>
4
        <p>这是一个段落333，这是一个段落333，这是一个段落333。</p>
5
    </div>

效果：

示例效果

多列布局 Columns

评论