av亚太一区二区三区,深夜亚洲伊人

CSS3 多列布局——column-width

column-width的使用和CSS中的width屬性一樣，不過不同的是，column-width屬性在定義元素列寬的時候，既可以單獨使用，也可以和多列屬性中其他屬性配合使用。其基本語法如下所示；

column-width: auto | <length>

取值說明

屬性值	說明
auto	如果column-width設置值為auto或者沒有顯式的設置值時，元素多列的列寬將由其他屬性來決定，比如前面的示例就是由列數column-count來決定。
<length>	使用固定值來設置元素列的寬度，其主要是由數值和長度單位組成，不過其值只能是正值，不能為負值。

任務

在編輯器的第7行輸入正確代碼，分為3欄，每欄的內容寬度設置為200px;（注：一定要考慮到瀏覽器的兼容性）具體效果見下圖：

溫馨提示：案例的效果如上圖所示才算順利通關，否則請再學習一遍本節的知識點！

?不會了怎么辦

index.html
style.css

<!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頁面中方便實現類似報紙、雜志那種多列排版的布局，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>

.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; }

提問題

提交

其他問答

查看更多本節問答

寫筆記

公開筆記

提交

全屏

請驗證，完成請求

由于請求次數過多，請先驗證，完成再次請求

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

10-2 CSS3...

CSS3 多列布局——column-width

任務

提問題

其他問答

寫筆記

您還未綁定服務號

收藏課程后，能更快找到我哦～

手記推薦

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

10-2 CSS3...

熱搜

最近搜索清空

CSS3 多列布局——column-width

任務

提問題

其他問答

寫筆記

您還未綁定服務號

收藏課程后，能更快找到我哦～

手記推薦

收藏課程后，能更快找到我哦～