报纸排版 内容自适应 多列并排

CSS

​
 <style type="text/css">
        .column {
            column-width: auto;
            -webkit-column-width: auto;
            column-width: 200px;
            -moz-column-width: 200px;
            -webkit-column-width: 200px;
            -o-column-width: 200px;
            -ms-column-width: 200px;
            height: 100%;
            /*按照列的个数的划分*/
            column-count: 4;
            -webkit-column-count: 4;
            -moz-column-count: 4;
            -ms-column-count: 4;
            -o-column-count: 4;
            /*列之间的分隔线*/
            -moz-column-rule: 3px outset #ff0000;
            /* Firefox */
            -webkit-column-rule: 3px outset #ff0000;
            /* Safari and Chrome */
            -o-column-rule: 3px outset #ff0000;
            -ms-column-rule: 3px outset #ff0000;
            column-rule: 3px outset #ff0000;

            column-gap: 20px;
            -webkit-column-gap: 20px;
            -moz-column-gap: 20px;
            -ms-column-gap: 20px;
            -o-column-gap: 20px;
            -moz-column-fill: balance;
            /* columns: 3 auto; */
        }

        h1 {
            column-span: all;
            -webkit-column-span: all;
        }
    </style>

​

HTML

<div class="column">
        <h1>title222222222222222222222222222222222222222222222222222222</h1>
        这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容
        这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这这这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容
        这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这这这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容
        这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这这这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容
        这是这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这这这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容这是报纸的内容
    </div>