CSS3 多列布局——column-count
column-count屬性主要用來(lái)給元素指定想要的列數(shù)和允許的最大列數(shù)。其語(yǔ)法規(guī)則：
column-count：auto | <integer>
取值說(shuō)明：
|
屬性值
|
屬性值說(shuō)明
|
|
auto
|
此值為column-count的默認(rèn)值，表示元素只有一列，其主要依靠瀏覽器計(jì)算自動(dòng)設(shè)置。
|
|
<integer>
|
此值為正整數(shù)值，主要用來(lái)定義元素的列數(shù)，取值為大于0的整數(shù)，負(fù)值無(wú)效。
|
例如：將列分成四列顯示，代碼如下：
column-count:4;
任務(wù)
在CSS編輯器的第7行輸入正確代碼，讓內(nèi)容分成2列顯示,注意瀏覽器的兼容性！如下圖所示：
溫馨提示：案例相關(guān)效果要與上圖一致，才算通過(guò)哦！否則請(qǐng)?jiān)倏匆幌卤竟?jié)的知識(shí)點(diǎn)！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>columns-count</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="columns">
<h2>我要分列顯示</h2>
<p>為了能在Web頁(yè)面中方便實(shí)現(xiàn)類似報(bào)紙、雜志那種多列排版的布局，W3C特意給CSS3增加了一個(gè)多列布局模塊（CSS Multi Column Layout Module）。它主要應(yīng)用在文本的多列布局方面。對(duì)于文本的多列布局，我想大家并不陌生，因?yàn)閳?bào)紙和雜志上我們隨處可見(jiàn)，這種布局在報(bào)紙和雜志上都使用了幾十年了，但需要在Web頁(yè)面上實(shí)現(xiàn)文本的多列布局，正如下圖所示。</p>
<p>為了能在Web頁(yè)面中方便實(shí)現(xiàn)類似報(bào)紙、雜志那種多列排版的布局，W3C特意給CSS3增加了一個(gè)多列布局模塊（CSS Multi Column Layout Module）。它主要應(yīng)用在文本的多列布局方面。對(duì)于文本的多列布局，我想大家并不陌生，因?yàn)閳?bào)紙和雜志上我們隨處可見(jiàn)，這種布局在報(bào)紙和雜志上都使用了幾十年了，但需要在Web頁(yè)面上實(shí)現(xiàn)文本的多列布局，正如下圖所示。</p>
<p>為了能在Web頁(yè)面中方便實(shí)現(xiàn)類似報(bào)紙、雜志那種多列排版的布局，W3C特意給CSS3增加了一個(gè)多列布局模塊（CSS Multi Column Layout Module）。它主要應(yīng)用在文本的多列布局方面。對(duì)于文本的多列布局，我想大家并不陌生，因?yàn)閳?bào)紙和雜志上我們隨處可見(jiàn)，這種布局在報(bào)紙和雜志上都使用了幾十年了，但需要在Web頁(yè)面上實(shí)現(xiàn)文本的多列布局，正如下圖所示。</p>
</div>
</body>
</html>
.columns {
padding: 5px;
border: 1px solid green;
width: 600px;
margin: 20px auto;
-webkit-column-?;
-moz-column-?;
-o-column-?;
-ms-column-?;
?;
}
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
