首页  >  文章  >  web前端  >  ?4种实现多列布局css_html/css_WEB-ITnose

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

WBOY
WBOY原创
2016-06-24 11:51:021125浏览

摘要:

  多列布局在网站应用中也是经常见到的,今天就分享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上测试,如果使用请注意兼容性,有任何问题都可以提问

 

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn