css如何将一行平均分成几列?
column-count 属性规定元素应该被划分的列数。它的取值可以是number|auto
number:元素内容将被划分的最佳列数。
auto:由其他属性决定列数,比如 "column-width"。
(相关课程推荐:css视频教程)
<!DOCTYPE html> <html> <head> <style> body{ background: #e4e4e4; } .newspaper { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ /* 平均分为3列 */ column-count: 3; background: #eee; } .item{ font-size: 16px; background: #fff; } </style> </head> <body> <p><b>注释:</b>Internet Explorer 不支持 column-count 属性。</p> <div class="newspaper"> <div class="item">这是第1列</div> <div class="item">这是第2列</div> <div class="item">这是第3列</div> </div> </body> </html>
效果:
此外,我们还可以设置column-gap,来规定每一列之间的间距。使用Column-rule规定列之间的宽度、样式和颜色。
column-gap:80px; column-rule:1px outset #ff0000;
本文来自css3答疑栏目,欢迎学习!
以上就是css如何将一行平均分成几列?的详细内容,更多请关注易知道|edz.cc其它相关文章!