从CSS 3.0开始，可以将文本分成多列，就像报纸一样。 CSS 3.0附带了一组用于列布局的CSS属性。我将在本文中解释这些列CSS属性。

列数

列布局的第一个CSS属性是" column-count"。 " column-count" CSS属性使我们可以设置将HTML元素的内容分为几列。这是一个"列数"示例：

p.twoColumns {
    column-count: 2;
}

这个示例将CSS类twoColumns的所有p元素的列数设置为2.

在撰写本文时，在Firefox，Chrome和Safari中，我们必须使用其特殊的前缀，如下所示：

p.twoColumns {
    column-count: 2;
    -moz-column-count: 2;
    -webkit-column-count: 2;
}

这应该使其可以在Internet Explorer，Firefox，Chrome和Safari中使用。

这是应用了此CSS的p元素的外观(加上边框以使效果更明显)：

这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。

我们还可以为包含p元素的div元素设置列布局。在这种情况下，内容将分为几段，而各段又分为几列。因此，一列可以包含少于或者多于一个的段落。这是一个例子：

<div style="border: 1px dotted #cccccc;
    column-count: 2; -moz-column-count: 2; -webkit-column-count: 2;">
    <p>
        This is the first paragraph. This is the first paragraph.
        This is the first paragraph. This is the first paragraph.
        This is the first paragraph. This is the first paragraph.
        This is the first paragraph. This is the first paragraph.
    </p>
    <p>
        This is the second paragraph. This is much shorter than
        the first paragraph.
    </p>
</div>

这是浏览器中的外观：

这是第一段。这是第一段。这是第一段。这是第一段。这是第一段。这是第一段。这是第一段。这是第一段。

这是第二段。这比第一段短得多。

请注意，这两段是如何分成几列的，就像它们是一个长文本的一部分一样。还要注意p元素的边距如何使列布局看起来有些怪异。我们可以通过更改p元素的边距来更改它。

列宽

我们可以设置列宽，而不是设置显式列数。然后，浏览器将创建尽可能多的宽度的列，以适合元素。这是一个例子：

p.columnWidth {
    column-width: 150px;
}

本示例将CSS类columnWidth的所有p元素的内容划分为150个像素宽的列。列数取决于p元素的宽度。

同样，我们将必须使用-webkit-和-moz-前缀才能使其在Firefox，Chrome和Safari中正常工作：

p.columnWidth {
    column-width: 150px;
    -moz-column-width: 150px;
    -webkit-column-width: 150px;
}

这是应用了这些样式的p元素的外观：

这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。

结合列数和列宽

如果我们为HTML元素同时设置了" column-count"和" column-width"，则" column-width"将变为"最小列宽"，而" column-count"将变为"最大列数"。让我通过一个例子来解释这个规则。

如果我们将" column-width"设置为" 200px"，而" column-count"设置为3，则浏览器将创建最小宽度为200像素的列，直到最大3列。一旦有3列，浏览器将仅扩展3列以适应可用空间。

列间隙

" column-gap" CSS属性使我们可以指定列之间的间隔。这是一个例子：

p.columnGap {
    column-count: 2;
    column-gap  : 3em;
    -moz-column-gap  : 3em;
    -webkit-column-gap  : 3em;
}

本示例将列间隙设置为" 3em"，这是默认列间隙的3倍。这是两列具有不同间隙的列，因此我们可以看到" column-gap"的工作方式：

这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。

这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。

请注意，第二个示例中的两列之间的差距如何变大。此示例使用的列间距为3em，而不是标准的1em。

列规则

" column-rule" CSS属性使我们能够在列之间绘制标尺(边界)。 " column-rule" CSS属性采用与border CSS属性相同的值。这是一个例子：

p.columnRule {
    column-count: 2;
    column-rule  : 1px solid #cccccc;
    -moz-column-rule  : 1px solid #cccccc;
    -webkit-column-rule  : 1px solid #cccccc;
}

这是将column-rule示例应用于p元素时的外观：

这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。这是一个很长的文字。

请注意，各列之间有一个边框。

与" border"属性一样，我们也可以使用" column-rule-width"，" column-rule-style"和" column-rule-color" CSS属性，以防分别设置这些参数而不是设置它们都是通过column-ruleCSS属性来实现的。记住要使用浏览器前缀！

列跨度

" column-span" CSS属性可用于允许元素跨越多个列，就像HTML表中的" colspan"属性一样。例如，这可能是理想的。 h2元素或者img元素。在编写" column-span" CSS属性时，它在Internet Explorer(11)，Chrome和Safari中有效，但在Firefox(31)中无效。

" column-span" CSS属性可以采用以下两个值之一：

• 1
• all

值" 1"表示元素跨越一列。值" all"表示该元素跨越所有列。

这是一个"跨度"示例：

<div style="column-count: 4; -moz-column-count: 4; -webkit-column-count: 4;">
    <h2 style="column-span:all; -moz-column-span: all; -webkit-column-span: all;">
      This is a long headline which spans across multiple columns
    </h2>

    <p>
        This is a long, long, text.
        This is a long, long, text.
        This is a long, long, text.
        This is a long, long, text.
        This is a long, long, text.
    </p>
</div>

这是此示例在浏览器中的外观(添加了灰色边框)：

这是一个长标题，横跨多列

这是很长很长的文字。这是很长很长的文字。这是很长很长的文字。这是很长很长的文字。这是很长很长的文字。

将元素分成多列

有时，诸如ul元素(列表)之类的元素或者标题可能会分成多列。例如，如果较长的列表位于一列的底部，则浏览器可能会尝试在第一列中显示列表的一部分，在下一列中显示列表的一部分。

我们可以告诉浏览器是否允许其中断元素，以及如何使用这三个CSS属性：

• break-inside
• break-before
• break-after

break-inside

" break-inside" CSS属性告诉浏览器是否允许将元素分成多列。 break-insideCSS属性可以接受以下值：

• auto
• avoid

值" auto"允许浏览器决定是否应将一个元素分成多列。值" avoid"告诉浏览器不要将元素分成多列。

break-before + break-after

" break-after" CSS属性指定允许浏览器在元素之前还是之后打开。这两个CSS属性采用以下值之一：

• auto
• avoid
• column

值" auto"允许浏览器决定在何处中断元素。

值" avoid"告诉浏览器不要在元素之前或者之后立即中断(取决于我们将" break-before"还是" break-after"设置为" avoid")。

值column会在元素之前或者之后强制中断(取决于我们是否将column设置为" break-before"或者" break-after")。