## 20.2.1.基本概念 所谓多栏布局，就是一个盒子设置栏宽属性或栏数量属性，就构成多栏布局，则其中的内容，会先在第一栏展示，第一栏展示满后，再展示到第二栏，以此类推。 多栏布局最常见的就是杂志或报纸上常见的“分栏版面”。比如杂志最常用的是分为两栏。 多栏布局通常用于盒子内部主要以文字（行内元素）为主的情形。 给一个盒子设定栏宽属性或栏数量属性（二选一），就可以实现多栏布局效果。 通常效果类似这样：  ## 20.2.2.主要属性 * 栏宽度属性column-width 设定分栏布局中一个栏的宽度值；实际宽度会根据外层盒子的宽度有所调整（可能变大）。 * 栏数量属性column-count 设定分栏布局中的总栏数。 * columns属性： 上述column-width和column-count的综合属性； 使用形式：columns: 栏宽值 栏目数； 实际表现上，当总宽度大于等于“栏宽x栏目数”时，栏目数固定，栏宽可能会有所调整（变大）。 当总宽度小于“栏宽x栏目数”时，栏目数会减少（保证栏宽不小于设定的栏宽）。 * 栏间隙属性column-gap 设定栏与栏之间的宽度值，默认是font-size大小（比如14px） * 栏分割线属性column-rule 栏分割线属性，就是两栏之间的线，如果不设定默认就是“空的”，就没有分割线，只有间隙（gap）。 栏分割线属性类似边框线（但只是一条线），可以设定：线宽，线型，线色。 有如下几个属性： column-rule-width：设定线宽，比如1px，5px； column-rule-style：设定线型，比如solid，dashed，dotted； column-rule-color：设定线色，比如red， #ff9966， rgb(200,100,0) column-rule：上述3个属性的综合属性。 ## 20.2.3.应用案例 实现如下图示的分栏布局效果。