
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其它相关文章!











