多欄版面配置
CSS3 可以將常值內容設計成像報紙一樣的多欄版面配置，如下執行個體:
代碼如下（具體的解釋也在代碼中）
瀏覽器支援
表格中的數字表示支援該方法的第一個瀏覽器的版本號碼。
緊跟在數字後面的 -webkit- 或 -moz- 為指定瀏覽器的首碼。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document李波</title> <style> .p { /*控制列數*/ -moz-column-count: 3; /* Firefox */ -webkit-column-count: 3; /* Safari and Chrome */ column-count: 3; /*控制列和列之間的寬*/ -moz-column-gap: 90px; /* Firefox */ -webkit-column-gap: 90px; /* Safari and Chrome */ column-gap: 90px; /*控制列和列之間的線*/ -webkit-column-rule-style: dashed; /* Chrome, Safari, Opera */ -moz-column-rule-style: dashed; /* Firefox */ column-rule-style: dashed; /*控制列和列之間線的寬度*/ -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */ -moz-column-rule-width: 1px; /* Firefox */ column-rule-width: 1px; /*控制列和列之間線的顏色*/ -webkit-column-rule-color: green; /* Chrome, Safari, Opera */ -moz-column-rule-color: green; /* Firefox */ column-rule-color: green; /*以上的列和列之間線的寬度、顏色、以及性質都可縮寫為“column-rule”*/ -webkit-column-rule: 1px dashed green; /* Chrome, Safari, Opera */ -moz-column-rule: 1px dashed green; /* Firefox */ column-rule: 1px dashed green; /*若沒有設定列數，就會根據列寬走*/ -webkit-column-width: 190px; /* Chrome, Safari, Opera */ column-width: 370px; } .p h1 { text-align: center; -webkit-column-span: all; } </style></head><body> <p class="p"> <h1>我的愛好</h1> <h3>第一段內容</h3> <p style="color:red"> <b>注意:</b>( Internet Explorer 9及更早 IE 版本瀏覽器不支援 column-count 屬性。）</p> <p>每個人都生活在成長當中，在成長當中也會有更多的夢想，更多的堅持！慢慢凝結成成長的深海。 我=畫畫</p> <h3>第二段內容</h3> <p>畫畫，這個愛好如此的平凡！卻感染著大部分女孩的心！看著筆在手中輕輕揮動，紙上一切都活了！走了起來！一片栩栩如生。在學校的一次美術課上，美術老師展示著別的班同學的畫，個個栩栩如生，活靈活現！我羨慕極了！小小的心靈被這些美麗的畫驚醒了。讓我下定了決心，努力地堅持學習美術，學號美術！讓我的手用筆一揮也能描述出這種境界！</p> <h3>第三段內容</h3> <p>畫畫，這個愛好如此的平凡！卻感染著大部分女孩的心！看著筆在手中輕輕揮動，紙上一切都活了！走了起來！一片栩栩如生。在學校的一次美術課上，美術老師展示著別的班同學的畫，個個栩栩如生，活靈活現！我羨慕極了！小小的心靈被這些美麗的畫驚醒了。讓我下定了決心，努力地堅持學習美術，學號美術！讓我的手用筆一揮也能描述出這種境界！</p> <h3>第四段內容</h3> <p>畫畫，這個愛好如此的平凡！卻感染著大部分女孩的心！看著筆在手中輕輕揮動，紙上一切都活了！走了起來！一片栩栩如生。在學校的一次美術課上，美術老師展示著別的班同學的畫，個個栩栩如生，活靈活現！我羨慕極了！小小的心靈被這些美麗的畫驚醒了。讓我下定了決心，努力地堅持學習美術，學號美術！讓我的手用筆一揮也能描述出這種境界！</p> <h3>第五段內容</h3> <p>畫畫，這個愛好如此的平凡！卻感染著大部分女孩的心！看著筆在手中輕輕揮動，紙上一切都活了！走了起來！一片栩栩如生。在學校的一次美術課上，美術老師展示著別的班同學的畫，個個栩栩如生，活靈活現！我羨慕極了！小小的心靈被這些美麗的畫驚醒了。讓我下定了決心，努力地堅持學習美術，學號美術！讓我的手用筆一揮也能描述出這種境界！</p> </p></body></html>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
