使用多列布局

CSS 多列布局模块中定义的属性扩展了块级布局模式，使您可以轻松定义多列文本。如果行太长，人们会很难阅读文本。如果眼睛从一行末尾移动到下一行开头需要花费太长时间，读者可能会忘记他们正在阅读哪一行。为了在使用大屏幕阅读文本时提供更好的用户体验，您应该使用并排放置的文本列来限制文本宽度，就像报纸一样。

使用列

列数和宽度

两个 CSS 属性控制是否以及出现多少列：column-count 和 column-width.

column-count 属性将列数设置为特定数量。例如：

示例 1

HTML

html
<div id="col">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
  </p>
  <p>
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
    aliquip ex ea commodo consequat.
  </p>
  <p>
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
    eu fugiat nulla pariatur.
  </p>
  <p>
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
    deserunt mollit anim id est laborum.
  </p>
</div>

CSS

css
#col {
  column-count: 2;
}

结果

内容将以两列显示

column-width 属性设置所需的最小列宽。如果未设置column-count，则浏览器将自动创建尽可能多的列以适合可用宽度。

示例 2

HTML

html
<div id="wid">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>

CSS

css
#wid {
  column-width: 100px;
}

结果

在多列块中，内容会根据需要自动从一列流到下一列。所有 HTML、CSS 和 DOM 功能都在列内受支持，包括编辑和打印。

列简写

您可以使用 column-count 或 column-width。由于这些属性的值不会重叠，因此使用简写 columns 通常很方便。

示例 3

在这个例子中，CSS 声明 column-width: 12em 被 columns: 12em 替换。

HTML

html
<div id="col_short">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>

CSS

css
#col_short {
  columns: 12em;
}

示例 4

在这个例子中，CSS 声明 column-count: 4 被 columns: 4 替换。

HTML

html
<div id="columns_4">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>

CSS

css
#columns_4 {
  columns: 4;
}

结果

示例 5

两个 CSS 声明 column-width: 8em 和 column-count: 12 可以被 columns: 12 8em 替换。简写中的column-count 部分是将出现的最大列数。column-width 是每列的最小宽度。

HTML

html
<div id="columns_12">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>

CSS

css
#columns_12 {
  columns: 12 8em;
}

结果

假设列之间的默认间隙为1em，如果容器宽度大于103ems（12 列 * 每列8em 宽度 + 7 个1em 间隙），则将有 12 列，每列宽度为8ems 或更多。如果容器宽度小于103ems，则列数将少于 12 列。如果容器宽度小于17ems（8em 列 + 8em 列 + 1em 间隙），则内容将以单列显示，没有列间隙。

高度平衡

CSS 列要求列高度必须平衡：也就是说，浏览器会自动设置最大列高度，以便每列中内容的高度大致相等。Firefox 会这样做。

然而，在某些情况下，显式设置列的最大高度也很有用，然后从第一列开始布局内容，并创建尽可能多的列，可能会溢出到右侧。 因此，如果高度受限，通过在多列块上设置 CSS height 或 max-height 属性，每列都可以增长到该高度，并且在添加新列之前不会进一步增长。 此模式对于布局也更加高效。

列间距

列之间存在间隙。 建议的默认值为 1em。 此大小可以通过将 column-gap 属性应用于多列块来更改。

示例 6

HTML

html
<div id="column_gap">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>

CSS

css
#column_gap {
  column-count: 5;
  column-gap: 2em;
}

结果

结论

CSS 列是一种布局原语，可以帮助在宽视窗上查看响应式内容时，使大量文本块更易于阅读。 富有想象力的开发者可能会发现它们有很多用途，尤其是在与 容器查询 和自动高度平衡功能结合使用时。