CSS 多列布局

　　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：默认值，各列的高度将会根据内容最多的那一列的高度进行统一。