?4种实现多列布局css_html/css_WEB-ITnose-html教程-PHP中文网

?4种实现多列布局css_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:51:02

原创

1229人浏览过

摘要：

　　多列布局在网站应用中也是经常见到的，今天就分享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>

登录后复制

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

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

立即学习“前端免费学习笔记（深入）”；