​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上测试，如果使用请注意兼容性，有任何问题都可以提问