---
title: "IT课程 CSS基础 030_多列布局 Columns"
date: 2024-02-05T22:00:00.000Z
tags: ["IT课程", "HTML课程", "CSS课程", "JavaScript课程", "Java课程", "计算机系统与网络", "hello css", "css列", "css多列", "column", "columns"]
categories: ["学习", "CSS基础"]
canonical: https://www.zhaojian.net/it-course-css-030/
author: 赵健
---

### 多列布局 Columns

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

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

示例：

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

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

效果：

![示例效果](/uploads/2024/02/msedge_RySeZLh51w.png)