1. 学习
  2. 核心学习模块
  3. CSS 布局
  4. 多列布局

多列布局

多栏布局规范提供了一种将内容排列成多栏的方法，就像您在报纸上看到的那样。本文将介绍如何使用此功能。

预备知识 HTML 基础（学习 使用 HTML 构建内容），以及对 CSS 工作原理的理解（学习 CSS 样式基础）。
目标 学习如何在网页上创建多栏布局，就像您在报纸上可能找到的那样。

一个基本示例

让我们探索如何使用多栏布局 — 通常称为 multicol。您可以通过 下载 multicol 起始文件 并将 CSS 添加到相应的位置来跟随学习。在本节的底部，您可以查看最终代码应是什么样子的示例。

三栏布局

我们的起始文件包含一些非常简单的 HTML：一个带有 container 类的包装器，其中包含一个标题和一些段落。

带有 container 类的 <div> 将成为我们的 multicol 容器。我们通过使用以下两个属性之一来启用 multicol：column-count 或 column-width。column-count 属性以数字作为其值，并创建该数量的栏。如果您将以下 CSS 添加到您的样式表中并重新加载页面，您将获得三栏：

css
.container {
  column-count: 3;
}

您创建的栏具有灵活的宽度 — 浏览器会计算如何为每栏分配空间。

设置栏宽

将您的 CSS 更改为使用 column-width，如下所示：

css
.container {
  column-width: 200px;
}

浏览器现在会为您提供指定大小的尽可能多的栏；任何剩余空间将在现有栏之间共享。这意味着除非您的容器正好能被该宽度整除，否则您不会得到正好是您指定宽度的栏。

设置栏的样式

multicol 创建的栏无法单独设置样式。无法使一栏比其他栏大，也无法更改单栏的背景或文本颜色。您有两种机会可以更改栏的显示方式：

使用上面的示例，通过添加 column-gap 属性来更改间隙大小。您可以尝试不同的值 — 该属性接受任何长度单位。

现在，使用 column-rule 在栏之间添加规则。与您在先前课程中遇到的 border 属性类似，column-rule 是 column-rule-color、column-rule-style 和 column-rule-width 的简写，并接受与 border 相同的值。

css
.container {
  column-count: 3;
  column-gap: 20px;
  column-rule: 4px dotted rgb(79 185 227);
}

尝试添加不同样式和颜色的规则。

需要注意的是，规则本身不占用任何宽度。它位于您使用 column-gap 创建的间隙上。要在规则两侧创建更多空间，您需要增加 column-gap 的大小。

跨栏

您可以使一个元素跨越所有栏。在这种情况下，内容将在跨栏元素的引入处中断，然后在元素下方继续，创建一个新的栏集。要使一个元素跨越所有栏，请为 column-span 属性指定 all 值。

注意：无法使一个元素仅跨越部分栏。该属性只能具有 none（默认值）或 all 的值。

栏与分段

多栏布局的内容是分段的。它本质上与分页媒体中的内容行为相同，例如打印网页时。当您将内容转换为 multicol 容器时，它会分段成栏。为了让内容做到这一点，它必须中断。

分段框

有时，这种中断会在导致阅读体验不佳的地方发生。在下面的示例中，我使用 multicol 来布局一系列框，每个框内部都有一个标题和一些文本。如果栏在两者之间分段，标题将与文本分开。

html
<div class="container">
  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>
  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>
</div>
css
.container {
  column-width: 250px;
  column-gap: 20px;
}

.card {
  background-color: rgb(207 232 220);
  border: 2px solid rgb(79 185 227);
  padding: 10px;
  margin-bottom: 1em;
}

设置 break-inside

为了控制这种行为，我们可以使用 CSS 分段规范中的属性。此规范为我们提供了控制 multicol 和分页媒体中内容中断的属性。例如，通过将 break-inside 属性设置为 avoid 值添加到 .card 的规则中。这是标题和文本的容器，因此我们不希望它被分段。

css
.card {
  break-inside: avoid;
  background-color: rgb(207 232 220);
  border: 2px solid rgb(79 185 227);
  padding: 10px;
  margin-bottom: 1em;
}

添加此属性后，框将保持为一个整体 — 它们现在不会跨栏分段。

总结

您现在知道如何使用多栏布局的基本功能了，这是您在为正在构建的设计选择布局方法时可用的又一个工具。

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 ，由 MDN 贡献者 修改。

在 GitHub 上查看此页面 • 报告此内容的问题