CSS3 多列样式

CSS3中的多列属性可以定义多列文本显示，类似报纸上的多列显示效果。

例如下面的一段文字，分成三列显示：

Linux265资源分享网，简称Linux265，是一个致力于分享Linux相关资讯，推广Linux发行版，分享Linux游戏，分享Linux各种优秀实用软件，分享Linux相关教程的资源分享站。本站建立的宗旨是通过分享，让更多的人了解Linux，学习Linux，使用Linux，喜欢Linux。

CSS 多列属性

本章节我们将讲解以下几个多列属性：

• column-count
• column-gap
• column-rule-style
• column-rule-width
• column-rule-color
• column-rule
• column-span
• column-width

CSS3 创建多列

首先你需要通过 column-count 属性来定义多列列数，例如下面的示例是将div分成了3列：

div {
  column-count: 3;
}

列之间距离

通过column-gap属性可以定义多列之间的间距，例如下面的示例中定义列间距为40px。

div {
  column-gap: 40px;
}

CSS3 列间隔样式

通过column-rule-style属性可以定义每列之间的间隔的样式，例如下面的示例中：

div {
    column-rule-style: solid;
}

除了column-gap属性可以定义多列之间的间距，还可以通过column-rule-width 属性指定了两列的边框厚度:

div {
    column-rule-width: 1px;
}

而，column-rule-color 属性规定列之间的间隔线的颜色：

div {
    column-rule-color: lightblue;
}

当然为简化书写，column-rule 属性是 column-rule-* 所有属性的简写。

以下实例设置了列直接的边框的厚度，样式及颜色：

div {
    column-rule: 1px solid lightblue;
}

指定元素横跨列数

column-span 属性规定元素可以跨越多少列。

例如，下例中规定了<h2> 元素应跨所有列：

h2 {
  column-span: all;
}

指定每列宽度

CSS3中 column-width 属性可以定义列的宽度。

例如，下例中规定了列的宽度应为 100px：

实例

div {
  column-width: 100px;
}

CSS 多列属性

下表列出了所有 CSS3 的多列属性：