首页 > 代码库 > ?4种实现多列布局css
?4种实现多列布局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; /* 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上测试，如果使用请注意兼容性，有任何问题都可以提问
?4种实现多列布局css
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。