相关属性

属性	描述	Chrome	IE	Firefox	Safari	Opera
column-count	规定元素应划分的列数。	50.0	10.0	52.0	9.0	37.0
column-width	为列指定建议的最佳宽度。	50.0	10.0	52.0	9.0	37.0
columns	用于设置 column-width 和 column-count 的简写属性。	50.0	10.0	52.0	9.0	37.0
column-gap	指定列之间的间隙。	50.0	10.0	52.0	9.0	37.0
column-rule	用于设置所有 column-rule-* 属性的简写属性。	50.0	10.0	52.0	9.0	37.0
column-rule-color	规定列之间规则的颜色。	50.0	10.0	52.0	9.0	37.0
column-rule-style	规定列之间的规则样式。	50.0	10.0	52.0	9.0	37.0
column-rule-width	规定列之间的规则宽度。	50.0	10.0	52.0	9.0	37.0
column-span	规定一个元素应该跨越多少列。[all:所有列, length:指定列数]默认1	50.0	10.0	71.0	9.0	37.0

• break-inside:描述了在多列布局页面下的内容盒子如何中断，如果多列布局没有内容盒子，这个属性会被忽略。

将内容分为多列

<div class="container">
  <div style="column-count: 3">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

指定列之间的间隙

<div class="container">
  <div style="column-count: 3;column-gap: 40px;">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

指定列宽

column-width属性是用来设置多列布局中列的宽度。column-width属性和其它一些多列布局属性不一样，它可以单独使用。元素只要定义了column-width属性，元素就会形成多列布局，形成的列数取决于column-width属性值。

<div class="container">
  <div style="column-width: 100px">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
  </div>
</div>

1

2

3