多栏布局

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

先决条件 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;
}

您创建的列具有灵活的宽度——浏览器会计算出为每列分配多少空间。

设置 column-width

将您的 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: 0 0 1em 0;
}

设置 break-inside

要控制这种行为，我们可以使用 CSS Fragmentation 规范中的属性。此规范提供了一些属性，用于控制 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: 0 0 1em 0;
}

添加此属性会导致框保持完整——它们现在不会分段到列中。

测试您的技能！

您已经到达本文的结尾，但您还记得最重要的信息吗？您可以找到一些进一步的测试来验证您是否保留了这些信息，然后再继续——请参阅 测试您的技能：Multicol。

摘要

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

另请参阅