点击刷新
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;
© 著作权归作者所有
举报
发表评论
0/200
