本教程共 44 篇 · 第 35 篇 · 更新于 2026-07-29 · 约 10 分钟阅读

35. 多列布局

本节目标：理解 CSS 多列布局模块，能够实现报纸式的多列文本效果，掌握列数、间距、分隔线和跨列标题的设置。

多列布局（Multi-column Layout）是 CSS3 专门为文本排版设计的功能。不需要额外的 div 或浮动，几行代码就能让文字像报纸一样自动分栏。

column-count：指定列数

column-count 直接指定要分成几列。浏览器会自动计算每列宽度。

.article {
  column-count: 3;
}

<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .article {
      column-count: 3;
      column-gap: 32px;
      padding: 20px;
      line-height: 1.8;
    }
  </style>
</head>
<body>
  <div class="article">
    <p>话说天下大势，分久必合，合久必分。周末七国分争，并入于秦。及秦灭之后，楚、汉分争，又并入于汉。汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。</p>
    <p>推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃共相辅佐。时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。</p>
    <p>建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起，只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。</p>
  </div>
</body>
</html>

Note

指定的是最大列数。如果容器太窄，浏览器会自动减少列数。

column-width：指定列宽

column-width 指定每列的建议宽度。浏览器会根据容器实际宽度计算能放几列。

.article {
  column-width: 200px;
}

实际列数 = 容器宽度 ÷ 200px（取整）。容器变宽，列数自动增加。

<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .article {
      column-width: 180px;
      column-gap: 24px;
      padding: 16px;
      line-height: 1.8;
    }
  </style>
</head>
<body>
  <div class="article">
    <p>CSS 多列布局让文字像报纸一样自动分栏。不需要浮动，不需要定位，几行代码就能实现专业的排版效果。</p>
    <p>浏览器会自动平衡各列的高度，尽量让每列的文字量相近。这种自动平衡是其他布局方式很难做到的。</p>
    <p>多列布局适合大段正文的阅读场景，比如博客文章、新闻页面、文档内容等。</p>
  </div>
</body>
</html>

Tip

更适合响应式设计。不需要媒体查询，列数自动随容器宽度变化。

columns：简写属性

columns 是 column-width 和 column-count 的简写。

/* 列宽 200px，最多 4 列 */
columns: 200px 4;

/* 只指定列数 */
columns: 3;

/* 只指定列宽 */
columns: 200px;

column-gap：列间距

column-gap 设置列与列之间的间距。默认值是 normal（通常等于 1em）。

.article {
  column-count: 3;
  column-gap: 40px;
}

<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .article {
      column-count: 3;
      column-gap: 30px;
      padding: 16px;
      line-height: 1.8;
    }
  </style>
</head>
<body>
  <div class="article">
    <p>列间距是多列布局的重要参数。太窄会让两列文字挤在一起，太宽又会打断阅读的连贯性。</p>
    <p>一般建议列间距略大于行高，让读者能清晰区分各列。常用的值在 20px 到 40px 之间。</p>
  </div>
</body>
</html>

column-rule：列分隔线

column-rule 在列之间添加一条竖线，是 column-rule-width、column-rule-style、column-rule-color 的简写。

.article {
  column-rule: 1px solid #ccc;
}

<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .article {
      column-count: 3;
      column-gap: 30px;
      column-rule: 1px dashed #BDC3C7;
      padding: 16px;
      line-height: 1.8;
    }
  </style>
</head>
<body>
  <div class="article">
    <p>列分隔线能更清晰地划分各列，尤其在列间距较小时，可以有效防止读者串行阅读。</p>
    <p>分隔线的样式可以自定义：实线、虚线、点线都行。颜色通常用浅灰色，避免喧宾夺主。</p>
    <p>需要注意的是，分隔线本身不占空间。它画在列间距的正中间，不会把文字挤开。</p>
  </div>
</body>
</html>

Note

的语法和 border 几乎一样：宽度、样式、颜色。但它是画在列间距里的，不是边框。

column-span：跨列标题

默认情况下，所有元素都受多列影响。如果想让标题横跨所有列，用 column-span: all。

h2 {
  column-span: all;
}

<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .article {
      column-count: 3;
      column-gap: 30px;
      column-rule: 1px solid #ddd;
      padding: 16px;
      line-height: 1.8;
    }
    .article h2 {
      column-span: all;
      text-align: center;
      margin: 16px 0;
      color: #2C3E50;
      border-bottom: 2px solid #3498DB;
      padding-bottom: 8px;
    }
  </style>
</head>
<body>
  <div class="article">
    <h2>三国演义 · 第一回</h2>
    <p>滚滚长江东逝水，浪花淘尽英雄。是非成败转头空。青山依旧在，几度夕阳红。</p>
    <p>白发渔樵江渚上，惯看秋月春风。一壶浊酒喜相逢。古今多少事，都付笑谈中。</p>
  </div>
</body>
</html>

Note

只有两个值：none（默认，不跨列）和 all（跨所有列）。不能指定跨几列。

列填充方式：column-fill

column-fill 控制内容如何填充各列。

balance（默认）：尽量让各列高度相等。
auto：按顺序填充，先填满第一列再填第二列。

.article {
  column-count: 3;
  column-fill: balance;
}

对于长文章，

让版面更均匀。对于短内容，auto 可能更自然。

多列布局的适用场景

场景	是否适合
大段正文（博客、新闻）	非常适合
卡片网格布局	不适合，用 Grid
导航栏	不适合，用 Flexbox
报纸/杂志排版	非常适合
表单布局	不适合

多列布局是”内容驱动”的：文字自动流动、自动分栏、自动平衡高度。这是它和其他布局方式最大的区别。

多列属性速查

属性	作用	默认值
`column-count`	列数	`auto`
`column-width`	列宽	`auto`
`columns`	上面两个的简写	—
`column-gap`	列间距	`normal`
`column-rule`	列分隔线	—
`column-rule-style`	分隔线样式	—
`column-rule-width`	分隔线宽度	—
`column-rule-color`	分隔线颜色	—
`column-span`	跨列	`none`
`column-fill`	填充方式	`balance`