多列布局 - Ivo's Inkwell

698 字

3 分钟

多列布局

2026-03-15

无标签

在写微信小程序的时候就非常喜欢使用多列的布局模式，当时觉得flex布局不好看，特地在里面嵌套了一个grid布局让其更整洁。但是现在学了多列布局，虽然整体上不如flex 和grid 写的舒服和快捷，但是我还是觉得这个布局还是有一定的用武之处，比如考试。

概念#

多列布局其实就是我们经常看见报纸，书籍上面常见的分栏方式，缺点也是非常明显，在标题行上面没有办法指定合并行数，所以grid 目前还是我认为的最优解。

语法格式#

属性#

column-count：规定列数的属性
column-gap：规定每列之间间距的属性
column-rule：每列之间间隔的线样式的属性
column-width：每列的宽度，可以和column-count同时使用
column-span：用于横跨列的属性。只有两个值,none不横跨任何列，all横跨所有行

格式#

1
.elements {
2
    column-count: 3;
3
    column-gap: 3px;
4
    column-rule: 1px solid red;
5
    column-span: all;
6
}

案例#

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <title>多列布局示例</title>
7
    <style>
8
        body {
9
            font-family: Arial, sans-serif;
10
            line-height: 1.6;
11
            margin: 0;
12
            padding: 20px;
13
            background-color: #f5f5f5;
14
        }
15

16
        .multi-column {
17
            /* 设置列数为3 */
18
            column-count: 3;
19
            /* 设置列间距 */
20
            column-gap: 30px;
21
            /* 设置列之间的分割线 */
22
            column-rule: 1px solid #ddd;
23
            max-width: 1000px;
24
            margin: 0 auto;
25
            background-color: white;
26
            padding: 20px;
27
            border-radius: 8px;
28
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
29
        }
30

31
        .multi-column h2 {
32
            /* 让标题横跨所有列 */
33
            column-span: all;
34
            text-align: center;
35
            color: #333;
36
            margin-bottom: 20px;
37
            padding-bottom: 10px;
38
            border-bottom: 2px solid #eee;
39
        }
40

41
        .multi-column p {
42
            margin-bottom: 15px;
43
            text-align: justify;
44
        }
45

46
        @media (max-width: 768px) {
47
            .multi-column {
48
                column-count: 2;
49
            }
50
        }
51

52
        @media (max-width: 480px) {
53
            .multi-column {
54
                column-count: 1;
55
            }
56
        }
57
    </style>
58
</head>
59
<body>
60
    <div class="multi-column">
61
        <h2>多列布局示例</h2>
62
        <p>这是第一列的内容。多列布局是一种将内容自动分布到多个列中的CSS技术，类似于报纸的排版方式。这种布局特别适合展示大量的文本内容。</p>
63
        <p>通过简单的CSS属性，我们可以控制列的数量、间距和样式，而无需复杂的HTML结构。</p>
64
        <p>这是第二列的内容。多列布局会自动平衡各列的内容高度，使阅读体验更加舒适。当内容超过一列时，会自动流入下一列。</p>
65
        <p>使用多列布局可以创建出类似印刷品的视觉效果，同时保持内容的可访问性和响应式特性。</p>
66
        <p>这是第三列的内容。在多列布局中，我们可以使用column-span属性让某些元素横跨所有列，比如标题或重要的图片。</p>
67
        <p>通过媒体查询，我们可以为不同屏幕尺寸设置不同的列数，确保在各种设备上都有良好的显示效果。</p>
68
    </div>
69
</body>
70
</html>