CSS多列布局實現(xiàn)方法大全

    摘要：
    多列布局在網(wǎng)站應(yīng)用中也是經(jīng)常見到的，今天就分享4中多列布局。
    display:table
    代碼如下:
    <style>
    .table {
    width: auto;
    min-width: 1000px;
    margin: 0 auto;
    padding: 0;
    display:table;
    }
    .tableRow {
    display: table-row;
    }
    .tableCell {
    border: 1px solid red;
    display: table-cell;
    width: 33%;
    }
    </style>
    <div >
    <div >
    <div >
    one
    </div>
    <div >
    two
    </div>
    <div >
    three
    </div>
    </div>
    </div>
    float
    代碼如下:
    <style>
    .row {
    float: left;
    width: 33%;
    border: 1px solid red;
    }
    </style>
    <div >
    one
    </div>
    <div >
    two
    </div>
    <div >
    three
    </div>
    display: inline-block
    代碼如下:
    <style>
    .row {
    display: inline-block;
    width: 32%;
    border: 1px solid red;
    }
    </style>
    <div >
    one
    </div>
    <div >
    two
    </div>
    <div >
    three
    </div>
    column-count
    代碼如下:
    <style>
    .column {
    /* 設(shè)置列數(shù) */
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */
    column-count:3;
    /* 設(shè)置列之間的間距 */
    -moz-column-gap:40px; /* Firefox */
    -webkit-column-gap:40px; /* Safari and Chrome */
    column-gap:40px;
    /* 設(shè)置列之間的規(guī)則 */
    -moz-column-rule:4px outset #ff0000; /* Firefox */
    -webkit-column-rule:4px outset #ff0000; /* Safari and Chrome */
    column-rule:4px outset #ff0000;
    }
    </style>
    <div></div>
    小結(jié)：
    以上代碼都是在chrome上測試，如果使用請注意兼容性，有任何問題都可以提問