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

評論