?4 ways to implement multi-column layout css_html/css_WEB-ITnose

Summary:

Multi-column layout is also often seen in website applications. Today I will share 4 multi-column layouts.

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>

Summary:

The above code was tested on chrome. Please pay attention to compatibility if you use it. If you have any questions, you can ask