7、CSS3的多栏布局

1、前面介绍过的float属性或者通过display：inline-box 来实现多栏布局，但是这种方式，如果高不一样，无法实现底部对齐。
CSS3专门提供了多栏布局的功能。
采用的属性：column-count 属性来实现分栏的实例

为了实现分栏效果，CSS3增加了大量属性。
columns:通过该属性可同时指定栏目宽度、栏目数两个属性值。相当于column-width column-count
column-width：栏目宽度
column-count:栏目数
        注：以上两个属性相互影响。
column-rule:（复合属性），用于指定各栏目之间的分隔条。该属性可同时指定分隔条的样式 宽度 颜色。
column-rule-width:各栏目之间的分隔条的宽度
column-rule-style:各栏目之间的分隔条的样式
column-rule-color:各栏目之间的分隔条的颜色
column-gap:该属性指定一个长度值，用于指定各栏目之间的间距。
column-fill:该属性用于控制栏目的高度，该属性支持如下两个属性值：auto：随内容自动变化，balance：各栏目的高度将会统一成内容最多的那一栏的高度。
注：目前各主流浏览器都暂未支持使用标准的column-count属性，因此在各浏览器中需要增加特定的浏览器前缀，如:
    column-count:2;
    -moz-column-count:2;
    -o-column-count:2;
    -webkit-column-count:2;
2、使用盒模型实现多栏布局 box
前面讲解的display属性时介绍过多个属性值，这些属性值分别用于定义不同的“盒模型”，
CSS3还提供了一个display:box属性值，通过该属性值可以更好地实现多栏布局（注：与上面一样，主流浏览器目前还不支持标准的box，需要添加特性的前缀。-mox-box -webkit-box）
使用：只要把多个div元素放在设置了display:box的div元素内便可。

属性
box-sizing:显示方式
box-orient:排列方向
box-ordinal-group：设置box盒模型里子元素的排列顺序
box-flex:设置多余空间的分配比例。
注：overflow当有内容溢出时，是否显示滚动条。