css3-多列布局

多列布局类似报纸或杂志中的排版方式，主要用以控制大篇幅文本。

column-count：number随意列数（数字）

该属性规定元素内容应该被分隔的列数

column-gap：

该属性规定列之间的间隔大小

column-fill

设置或检索对象所有列的高度是否统一
auto：列高度自适应内容
balance：所有列的高度以其中最高的一列统一

column-span

设置或检索对象元素是否横跨所有列。
none：不跨列
all：横跨所有列

代码

  div{
            width: 500px;
            margin: 100px auto;
            border: 1px solid green;
            /* 被分隔的列数 */
            column-count: 2;
            /* 规定列之间的间隔大小 */
            column-gap: 5px;

        }
        h3{
            /* 横跨所有列 */
            column-span: all;
            text-align: center;
            /* 列高度自适应内容 */
            column-fill: auto;
            font: 30px/60px "微软雅黑";
        }
        p{
            text-indent: 2em;
        }

实例