Katy DeCorah

使用您的光标选择此句子。注意，当您选择文本时，背景颜色是如何填充空间的？您可以通过设置 ::selection 的样式来更改所选文本的背景颜色和颜色。设置此伪元素的样式非常棒……

列在内容的流动和平衡方面做得非常好。不幸的是，并非所有元素都能流畅地流动。有时，元素会卡在列之间。

幸运的是，您可以告诉浏览器使用 break-inside 将特定元素保持在一起。

li {
-webkit-column-break-inside: avoid;
          

要使列更清晰，您可以在每列之间添加一条垂直线。该线位于列间隙的中心。如果您曾经设置过 border 的样式，那么您就可以设置 column-rule 的样式了。

.container {
  -webkit-columns: 

当您希望将列保持在特定宽度时，请使用 column-width。

section {
-webkit-column-width: 200px;
   -moz-column-width: 200px;
        column-width: 200px;
}

浏览器将计算在空间中可以容纳多少列至少具有该宽度的列。……

在多列布局中，您可以使用 column-span 使元素跨列扩展。

h2 {
 -webkit-column-span: all;
         column-span: all;
}

将 column-span 分配给多列布局内的元素，使其成为跨列元素。这……

当您向多列元素添加高度时，您可以控制内容如何填充列。内容可以平衡或顺序填充。

ul {
  height: 300px;
  -webkit-columns: 3;
     -moz-columns: 3;
          columns: 3;
  -moz-column-fill: balance;
       column-fill: balance;
}

如果您在设计多列布局时需要确切的列数，请使用 column-count。

.lead {
  column-count: 3;
 }

给定列数，浏览器将以完全相同的列数均匀分布内容。

这……

只需几个 CSS 规则，您就可以创建一个打印风格的布局，该布局具有 Web 的灵活性。这就像拿着一份报纸，但随着报纸变小，列会自动调整和平衡，从而允许内容……

使用 CSS 列，您可以创建一个打印风格的布局，只需添加很少的标记，即可适应固定的画布之外。支持的浏览器将进行计算以将内容包装和平衡到整齐的列中。如果您已经在使用……