26CSS多列布局

CSS3 新增多列布局适合排版很长的文字内容，让其多列显示。

一、多列布局

语法格式：

columns:column-width | column-count;

• column-width：定义每列的宽度；
• columen-count：定义列数；

columns 属性初始值根据元素个别属性而定，它适用于不可替换的块元素、行内块元素、单元格，但是表格元素除外。

二、各个属性

1、设置列宽

使用 column-width 属性可以定义单列显示的宽度。

语法格式：

column-width: length | auto;

• length：长度值，不可为负值；
• auto：根据浏览器自动计算来设置

2、设置列数

使用 column-count 属性定义列数。

语法格式：

column-count:integer | auto;

• integer：定义栏目的列数，取值为大于 0 的整数。如果 column-width 和 column-count 属性没有明确值，则该值为最大列数。
• auto：根据浏览器计算值自动设置。

3、设置列间距

使用 column-gap 属性定义两栏之间的间距。

语法格式：

column-gap: normal | length;

• normal：根据浏览器默认设置进行解析，一般为 1em;
• length：长度值，不可为负值。

4、设置列边框样式

使用 column-rule 属性定义每列之间边框的宽度、样式和颜色。

语法格式：

column-rule: length | style | color | transparent;

• length：长度值，不可为负值，功能与 column-rule-width 属性相同；
• style：定义列边框样式。功能与 column-rule-style 属性相同；
• color：定义列边框的颜色。功能与 column-rule-color 属性相同；
• transparent：设置边框透明显示

CSS3 在此属性上派生了 3 个列边框属性：

column-rule-color: 定义列边框颜色；
column-rule-width: 定义列边框宽度；
column-rule-style: 定义列边框样式

5、设置跨列显示

使用 column-span 属性定义跨列显示，也可以设置单列显示。

语法格式：

column-span: none | all

• none：只在本栏中显示；
• all：将横跨所有列；

6、设置列高度

使用 column-fill 属性定义栏目的高度是否统一。

语法格式：

column-fill: auto | balance;

• auto：各列的高度随其内容的变化而自动变化。
• balance：默认值，各列的高度将会根据内容最多的那一列的高度进行统一。