?複数列レイアウトを実装する 4 つの方法 css_html/css_WEB-ITnose

概要:

複数列レイアウトは Web サイト アプリケーションでもよく見られます。今日は 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>

columns-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 でテストされていますので、注意してください。使用する場合の互換性、ご不明な点がございましたら、お問い合わせください。