為什么我設置高度之后他不會填滿每一列之后再填第二列??？
為什么我設置了高度之后，它不會填滿每一列之后再去填下一列？
<!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>效果如下：
2017-03-17
你這個設置是div的高度，并不能設置內容里面每列的高度。
對于column，CSS3規范里描述的是，各列的高度是均衡的，瀏覽器會自動調整每列里填充多少文本、均分文本，來使各列的高度保持均衡一致。
2017-05-09
設置列寬值相當于設置了最小列寬，三值都設置的情況下，當空間足夠時列寬會自動增大以適應布局；當空間不夠時，column-count先失效；column-co
unt失效后空間還是不夠的話column-gap失效，自始至終，列寬設置了固定值后，無論怎么擠壓，列寬都不會小于此固定值。
2017-03-11
就是因為你設置了高度啊