為什么我設(shè)置高度之后他不會填滿每一列之后再填第二列??？
為什么我設(shè)置了高度之后，它不會填滿每一列之后再去填下一列？
<!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頁面中方便實(shí)現(xiàn)類似報(bào)紙、雜志那種多列排版的布局，W3C特意給CSS3增加了一個多列布局模塊（CSS?Multi?Column?Layout?Module）。它主要應(yīng)用在文本的多列布局方面。對于文本的多列布局，我想大家并不陌生，因?yàn)閳?bào)紙和雜志上我們隨處可見，這種布局在報(bào)紙和雜志上都使用了幾十年了，但需要在Web頁面上實(shí)現(xiàn)文本的多列布局，正如下圖所示。</p>
???<p>為了能在Web頁面中方便實(shí)現(xiàn)類似報(bào)紙、雜志那種多列排版的布局，W3C特意給CSS3增加了一個多列布局模塊（CSS?Multi?Column?Layout?Module）。它主要應(yīng)用在文本的多列布局方面。對于文本的多列布局，我想大家并不陌生，因?yàn)閳?bào)紙和雜志上我們隨處可見，這種布局在報(bào)紙和雜志上都使用了幾十年了，但需要在Web頁面上實(shí)現(xiàn)文本的多列布局，正如下圖所示。</p>
???<p>為了能在Web頁面中方便實(shí)現(xiàn)類似報(bào)紙、雜志那種多列排版的布局，W3C特意給CSS3增加了一個多列布局模塊（CSS?Multi?Column?Layout?Module）。它主要應(yīng)用在文本的多列布局方面。對于文本的多列布局，我想大家并不陌生，因?yàn)閳?bào)紙和雜志上我們隨處可見，這種布局在報(bào)紙和雜志上都使用了幾十年了，但需要在Web頁面上實(shí)現(xiàn)文本的多列布局，正如下圖所示。</p>
</div>
</body>
</html>效果如下：
2017-03-17
你這個設(shè)置是div的高度，并不能設(shè)置內(nèi)容里面每列的高度。
對于column，CSS3規(guī)范里描述的是，各列的高度是均衡的，瀏覽器會自動調(diào)整每列里填充多少文本、均分文本，來使各列的高度保持均衡一致。
2017-05-09
設(shè)置列寬值相當(dāng)于設(shè)置了最小列寬，三值都設(shè)置的情況下，當(dāng)空間足夠時列寬會自動增大以適應(yīng)布局；當(dāng)空間不夠時，column-count先失效；column-co
unt失效后空間還是不夠的話column-gap失效，自始至終，列寬設(shè)置了固定值后，無論怎么擠壓，列寬都不會小于此固定值。
2017-03-11
就是因?yàn)槟阍O(shè)置了高度啊