css多列布局實(shí)現(xiàn)方法大全

    多列布局在網(wǎng)站應(yīng)用中也是經(jīng)常見(jiàn)到的，今天就分享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 class=table >
    <div class=tablerow >
    <div class=tablecell >
    one
    </div>
    <div class=tablecell >
    two
    </div>
    <div class=tablecell >
    three
    </div>
    </div>
    </div>
    float
    代碼如下:
    <style>
    .row {
    float: left;
    width: 33%;
    border: 1px solid red;
    }
    </style>
    <div class=row >
    one
    </div>
    <div class=row >
    two
    </div>
    <div class=row >
    three
    </div>
    display: inline-block
    代碼如下:
    <style>
    .row {
    display: inline-block;
    width: 32%;
    border: 1px solid red;
    }
    </style>
    <div class=row >
    one
    </div>
    <div class=row >
    two
    </div>
    <div class=row >
    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 class=column></div>
    小結(jié)：
    以上代碼都是在chrome上測(cè)試，如果使用請(qǐng)注意兼容性，有任何問(wèn)題都可以提問(wèn)