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

zhaoJian.Net

发布于 2024-04-03 12:51:42

10200

代码可运行

文章被收录于专栏：zhaoJian.Net

运行总次数：0

代码可运行

多列布局 Columns

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

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

示例：

.example{
    column-count: 3;
    /* column-width: 200px; */
    column-gap: 20px;
    column-rule: 1px solid red;
}
p {
    margin: 0 0 10px;
}

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

效果：