多列布局（column）

容器的属性

column-width: auto | < length > 。给列定义一个最小宽度（min-width）。

auto: 列宽由其他元素决定。
length: 显式设置最小宽度。

column-count: auto | < integer >定义列的数量。

auto: 元素只有一列。就像没有设置一样。
< integer >: 正整数值。取值是大于0的整数，负值无效。

columns: < column-width > || < column-count >。是column-width和column-count的简写。次序随意。

　　列宽 = （父元素宽度 - （列数-1）列间隙） / 列数*
　　比如：父元素40em，分为4列，列间隙为2em。那么列宽为（ 40 - （4-1） * 2） / 4 = 8.5em。
　　如果显式设置的列宽小于这个宽度，它会以这个宽度展示。
　　如果显式设置的列宽大于这个宽度，它会按照合适的尺寸重新排列列宽和列数。当前设置的列宽和列数并不准确。

column-gap: normal | < length >。定义列间距。值过大时会撑破布局。

normal: 默认值，由浏览器解析，一般是lem。
< length >: 有浮点数字和单位标识符组成的长度值。如：2.1em。

column-rule: < column-rule-width > | < column-rule-style > | < column-rule-color >。定义列边框。

　　它的中心线始终和列间距的中心线一样。换言之，它总处于两列的中间。和border类似。如果列边框大于列间距，并不会自动消失。列边框超出列间距的部分就像是沉在文字的下方一样（背景效果）。

column-fill: auto | balance。定义多列中每一列的高度是否统一。

　　这个属性很奇怪。并且在浏览器中不统一。它有两个值：auto | balance。在 ie10/ie11/opera40/chrome52中测试的结果都是一样的，发现这两个属性并没有区别。在firefox49中测试，这两个属性是有区别的，其中balance是每列高度差不多（对齐），auto就自动合并成一列了，无论自己设置的是多少列。

项目（元素）属性

column-span: none | all。定义一个元素横跨多少列。

　　如果我们常将标题横跨所有列。那么，column-span: all。其默认值是，column-span: none；表示不跨列。

代码：

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        <title>多列布局｜column-span</title>

    <style type="text/css">

        *{

            margin: 0;

            padding: 0;

        }

        .wrapper {

            width: 40em;

            margin:0 auto;

            border: 1px solid #ccc;

            /*多列布局*/

            -moz-column-count: 4;

            -webkit-column-count: 4;

            column-count: 4;

            -moz-column-gap: 2em;

            -webkit-column-gap: 2em;

            column-gap: 2em;

            -moz-column-rule: .1em dashed #ccc;

            -webkit-column-rule: .1em dashed #ccc;

            column-rule: .1em dashed #ccc;

            -webkig-column-fill: balance;

            -moz-column-fill: balance;

            column-fill: balance;

        }

        h1 {

            font-size: 1.5em;

            margin-bottom: 1em;

            -moz-column-span: all;

            -webkit-column-span: all;

            column-span: all;

            padding-bottom: 5px;

            text-align: center;

            border-bottom: 2px solid #ccc;

        }

        p {

            margin-bottom: 1em;

            text-indent: 2em;

            line-height: 1.625;

            font-size: .7em;

        }

    </style>

</head>

<body>

    <div class="wrapper">

        <h1>金融时报：微软能否拯救Windows 8？</h1>

        <p>网易科技讯 5月8日消息，据国外媒体报道，Windows 8上市以来遭到业界与用户的各种诟病，销售量也不乐观。虽然微软已经意识到问题的严重性，但是鲍尔默能否力挽狂澜，还不得而知。今天金融时报撰文分析Windows 8与微软所遇到的困境，并展望了他们的未来，以下是文章主要内容：</p>

        <h3>微软能否拯救Windows 8？</h3>

        <p>这个问题关乎世界上最大的软件公司的未来以及其首席执行官史蒂夫·鲍尔默（Steve Ballmer）的职业生涯。微软为了保持其在PC领域的领先地位而推出的操作系统并没有得到用户的认可。</p>

        <p>不过，看起来微软已经意识到问题的严重性。一个标志性动作就是，本周早些时候，微软宣布在今年年底之前发布Windows8的更新版本，代号为“Blue”。这是微软第一次打破了按年发布的传统，增加软件版本发布的频率，但跟竞争对手苹果和谷歌的软件更新发布频率还有不小差距。不过不管怎样这都说明微软已经开始采取行动，应对更激烈的竞争。</p>

        <p>设计融合PC和平板电脑的Win8已经遭到了业界各种严厉的批评。纽约高科技研究公司Envisioneering的分析师Richard Doherty表示，“坐在Win8前面会让人感觉这操作系统蠢毙了，早期使用反馈研究表明人们广泛表示对win8不满。”Win8结合了传统PC界面和平板触摸屏界面的设计理念也遭人诟病，一些评论认为微软过于雄心勃勃，以至于在两款平台上都没有做好。</p>

        <p>不过微软现在已经准备承认该软件确实给PC用户带来了不便：PC用户面对Win8时，需要经历一个十分陡峭的“学习曲线”。同时，微软也在做出改变，旨在提高Win8的可用性。虽然没有确凿证据，但微软受到了来自PC用户不小的压力。PC用户的希望是，当他们打开自己的PC时，是熟悉的Windows桌面，而不是被强制使用“丰富多彩”的微软瓷砖。同时，PC用户也一直希望微软把“开始”按钮弄回来。长期以来这一直是PC用户最熟悉的导航工具。</p>

        <p>这些反馈表明，很多用户还没有准备好使用Windows的触摸屏操作系统，而是继续把Windows当作PC时代的产品。微软本周也承认Win8的成功将不仅仅需要用户界面的变化。Win8的另一个问题是价格。不过微软目前正在推动硬件厂商生产尺寸更小，成本更低的平板。这样的话，Win8平板的价格可能迅速下降到400美元左右，并向300美元看齐。</p>

        <p>不过值得微软庆幸的是至少目前Win8没有遇到Vista的软件质量问题。许多企业用户因为Vista的各种弊病，直接跳过该版本，直接从早期的XP升级到Windows 7。约三分之二的企业用户目前已经升级到Windows 7。不过他们目前又开始了另一次观望，已决定是否要做新的升级。如果企业用户决定跳过Win8，那么微软将错过追赶苹果和谷歌的重要机会。</p>

    </div>

</body>

</html>

效果图：

持续更新，感谢大家支持。