首页> 软件资讯> 正文

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

飘花电影网[www.aikan.tv/special/piaohuadianyingwang/]; -webkit-column-count:3; column-count:3;-moz-column-gap:40px; -webkit-column-gap:40px; column-gap:40px;-moz-column-rule:4px outset #ff0000; -webkit-column-rule:4px outset #ff0000; column-rule:4px outset #ff0000;}</style><div class="column"></div>

小结:

以上代码都是在chrome上测试,如果使用请注意兼容性,有任何问题都可以提问


富德生命人寿 www.sino-life.com
慧欢资讯网