::column

可用性有限

此特性不是基线特性，因为它在一些最广泛使用的浏览器中不起作用。

实验性： 这是一项实验性技术
在生产中使用此技术之前，请仔细检查浏览器兼容性表格。

::column CSS 伪元素表示当容器通过CSS 多列布局设置为多列显示其内容时生成的独立列。::column 伪元素能够应用不影响布局的样式到这些生成的片段。

语法

css

::column {
  /* ... */
}

描述

当使用 CSS 多列布局将容器内容以多列布局时（例如，使用 column-count 属性），会生成 ::column 伪元素来包含每个独立列。

::column 伪元素只接受适用于滚动容器内元素的滚动捕捉属性，包括 scroll-margin、scroll-snap-align 和 scroll-snap-stop。

::column 伪元素可以有一个 ::scroll-marker 伪元素。其他伪元素，如 ::before 和 ::after，不会在 ::column 上生成。应用 ::column::scroll-marker 会为原始滚动容器的每一列创建一个标记，其中 ::scroll-marker 伪元素继承自 ::column 伪元素的原始元素，而不是 ::column 本身。

这对于CSS 轮播非常有用——::column 可以用于为每列生成 ::scroll-marker 伪元素，并使用 CSS 滚动捕捉将它们设置为捕捉目标。

虽然可以应用于 ::column 的样式非常有限，但未来可能会进行扩展。未来支持的任何属性和值都将限于不影响布局的那些。

示例

滚动列布局

此演示创建一个响应式容器，可将每个“页面”内容捕捉到位。它使用 columns 属性和 ::column 伪元素创建内容列，这些列跨越其父滚动容器的整个宽度，并且可以水平滚动。每列包含一个或多个列表项，其数量根据视口宽度而变化。

HTML

HTML 由一个无序列表组成，每个列表项都包含一些示例内容。

html

<ul>
...
  <li>
    <h2>Item 1</h2>
  </li>
...
</ul>

<ul>
  <li>
    <h2>Item 1</h2>
  </li>
  <li>
    <h2>Item 2</h2>
  </li>
  <li>
    <h2>Item 3</h2>
  </li>
  <li>
    <h2>Item 4</h2>
  </li>
  <li>
    <h2>Item 5</h2>
  </li>
  <li>
    <h2>Item 6</h2>
  </li>
  <li>
    <h2>Item 7</h2>
  </li>
  <li>
    <h2>Item 8</h2>
  </li>
  <li>
    <h2>Item 9</h2>
  </li>
  <li>
    <h2>Item 10</h2>
  </li>
  <li>
    <h2>Item 11</h2>
  </li>
  <li>
    <h2>Item 12</h2>
  </li>
  <li>
    <h2>Item 13</h2>
  </li>
  <li>
    <h2>Item 14</h2>
  </li>
  <li>
    <h2>Item 15</h2>
  </li>
</ul>

CSS

该列表被赋予固定的height和100vw的width，使其跨越视口的整个宽度。然后将overflow-x值设置为scroll，以便内容水平滚动，并使用CSS 滚动捕捉来捕捉每个项目或“页面”——使用x mandatory的scroll-snap-type值将列表变为滚动捕捉容器。最后，将columns值设置为1，强制列表内容显示为单列。还应用了center的text-align值，将内容与列表的中心对齐。

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Helvetica", "Arial", sans-serif;
}

css

ul {
  width: 100vw;
  height: 300px;
  padding: 10px;

  overflow-x: scroll;
  scroll-snap-type: x mandatory;

  columns: 1;
  text-align: center;
}

然后对列表项进行样式设置

将 display 值设置为 inline-block，使列表项并排排列并使列表水平滚动。
它们被设置了固定的width和height。
它们被设置为 text-align 值 left，以覆盖父容器上设置的 text-align: center，从而使项目内容左对齐。
通过:nth-child()，每个偶数列表项都有不同的背景颜色，这样更容易看到滚动效果。

css

li {
  list-style-type: none;

  display: inline-block;
  height: 100%;
  width: 200px;
  text-align: left;

  background-color: #eeeeee;
  outline: 1px solid #dddddd;
  padding: 0 20px;
  margin: 0 10px;
}

li:nth-child(even) {
  background-color: cyan;
}

scroll-snap-align 属性设置在 ::column 伪元素上（表示由 columns 属性生成的内容列），以便滚动时，列被捕捉到滚动容器的中心。

css

ul::column {
  scroll-snap-align: center;
}

结果

带滚动标记的基于列的轮播

在前面的示例基础上，我们将创建滚动标记以实现直接导航到不同的列，方法是将 scroll-marker-group 应用于容器，并将 ::scroll-marker 应用于每个 ::column 伪元素。HTML 保持不变。

CSS

我们使用 scroll-marker-group 属性创建一个滚动标记组，将该组放置在所有内容之后。

css

ul {
  scroll-marker-group: after;
}

然后，我们对 ::scroll-marker-group 伪元素应用样式，将滚动标记在行中央布局，每个标记之间有 0.4em 的间距。

css

::scroll-marker-group {
  display: flex;
  gap: 0.4em;
  place-content: center;
}

最后，我们使用 ::scroll-marker 伪元素为每个列表项创建一个带有黑色边框的圆形透明标记，然后通过 :target-current 伪类定位当前滚动元素的标记，并使其样式与其他标记不同。

css

ul::column::scroll-marker {
  content: "";
  width: 16px;
  height: 16px;
  background-color: transparent;
  border: 2px solid black;
  border-radius: 10px;
}

ul::column::scroll-marker:target-current {
  background-color: black;
}

结果

尝试按下滚动标记以直接跳转到每个页面。请注意当前标记如何突出显示，以便您可以看到在分页中的位置。还可以尝试使用 Tab 键切换到滚动标记组，然后使用光标键循环浏览每个页面。

有关更多轮播示例，请参阅创建 CSS 轮播。

规范

规范
CSS 多列布局模块级别 2 # column-pseudo

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

本页面最后由 MDN 贡献者于2025年10月13日修改。

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