4種實現多欄版面配置css，4種多欄版面配置css

4種實現多欄版面配置css，4種多欄版面配置css
摘要：

　　多欄版面配置在網站應用程式中也是經常見到的，今天就分享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 {            /* 設定列數 */            -moz-column-count:3; /* Firefox */            -webkit-column-count:3; /* Safari and Chrome */            column-count:3;                        /* 設定列之間的間距 */            -moz-column-gap:40px; /* Firefox */            -webkit-column-gap:40px; /* Safari and Chrome */            column-gap:40px;                        /* 設定列之間的規則 */            -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>

 

 

小結：

　　以上代碼都是在chrome上測試，如果使用請注意相容性，有任何問題都可以提問