为什么我设置高度之后他不会填满每一列之后再填第二列啊？
来源：10-1 CSS3 多列布局——Columns
慕码人1183263
2017-03-10 13:09
为什么我设置了高度之后，它不会填满每一列之后再去填下一列？
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>columns</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style>
.columns {
width: 1000px;
padding: 5px;
height:500px;
border: 1px solid green;
margin: 20px auto;
-webkit-columns: 100px 3;
-moz-columns: 100px 3;
-o-columns:100px 3;
-ms-columns: 100px 3;
columns: 100px 3;
}
</style>
</head>
<body>
<div class="columns">
<h2>我要分列显示</h2>
<p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</p>
<p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</p>
<p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</p>
</div>
</body>
</html>效果如下：
写回答
关注
3回答
-
- Pst_wac
- 2017-03-17 16:20:03
你这个设置是div的高度，并不能设置内容里面每列的高度。
对于column，CSS3规范里描述的是，各列的高度是均衡的，浏览器会自动调整每列里填充多少文本、均分文本，来使各列的高度保持均衡一致。
-
- qq_一叶秋原_0
- 2017-05-09 01:54:26
设置列宽值相当于设置了最小列宽，三值都设置的情况下，当空间足够时列宽会自动增大以适应布局；当空间不够时，column-count先失效；column-co
unt失效后空间还是不够的话column-gap失效，自始至终，列宽设置了固定值后，无论怎么挤压，列宽都不会小于此固定值。 -
- Love__
- 2017-03-11 12:15:24
就是因为你设置了高度啊
十天精通CSS3
本课程为CSS3入门教程，深刻详解CSS3知识让网页穿上绚丽装备
243145 学习 · 2677 问题
相似问题