CSS3 多列布局——column-width
column-width的使用和CSS中的width屬性一樣，不過(guò)不同的是，column-width屬性在定義元素列寬的時(shí)候，既可以單獨(dú)使用，也可以和多列屬性中其他屬性配合使用。其基本語(yǔ)法如下所示 ；
column-width: auto | <length>
取值說(shuō)明
|
屬性值
|
說(shuō)明
|
|
auto
|
如果column-width設(shè)置值為auto或者沒(méi)有顯式的設(shè)置值時(shí)，元素多列的列寬將由其他屬性來(lái)決定，比如前面的示例就是由列數(shù)column-count來(lái)決定。
|
|
<length>
|
使用固定值來(lái)設(shè)置元素列的寬度，其主要是由數(shù)值和長(zhǎng)度單位組成，不過(guò)其值只能是正值，不能為負(fù)值。
|
任務(wù)
在編輯器的第7行輸入正確代碼，分為3欄，每欄的內(nèi)容寬度設(shè)置為200px;（注：一定要考慮到瀏覽器的兼容性） 具體效果見下圖：
溫馨提示：案例的效果如上圖所示才算順利通關(guān)，否則請(qǐng)?jiān)賹W(xué)習(xí)一遍本節(jié)的知識(shí)點(diǎn)！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>columns-width</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)紙和雜志上我們隨處可見，這種布局在報(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)紙和雜志上我們隨處可見，這種布局在報(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)紙和雜志上我們隨處可見，這種布局在報(bào)紙和雜志上都使用了幾十年了，但需要在Web頁(yè)面上實(shí)現(xiàn)文本的多列布局，正如下圖所示。</p>
</div>
</body>
</html>
.columns {
padding: 5px;
border: 1px solid green;
width: 900px;
margin: 20px auto;
?200px;
?200px;
?200px;
?200px;
?200px;
-webkit-column-count:3;
-moz-column-count:3;
-o-column-count:3;
-ms-column-count:3;
column-count:3;
}
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
