溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“css3多列布局怎么實現”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“css3多列布局怎么實現”吧!
column-count：規定元素應該被分隔的列數；最大列數。
column-fill：規定如何填充列；默認值auto各列的高度隨內容自動調整，balance所有列高都設為最高的列高。
column-gap：規定列之間的間隔；默認值normal，相當于1em。需要注意的是，如果column-gap與column-width加起來大于總寬度的話，就無法顯示column-count指定的列數，會被瀏覽器自動調整列數和列寬。
column-rule：設置所有column-rule-*屬性的簡寫屬性；類似于border，區別是不占用任何空間，因此設了column-rule不會導致列寬的變化。另外如果邊框寬度大于column-gap列間距，將不會顯示邊框。
column-span：規定元素應該橫跨的列數；默認值none表示不跨列，all表示跨越所有列。例如文章標題可以設成all來跨列。
column-width：規定列的寬度；給列定義個最小的寬度。默認值為auto表示將根據column-count列的數量自動調整列寬。
上述屬性中column-width和column-count是最常用的，這兩個屬性的簡寫：columns；比如：
#col{
-moz-columns:128em;
-webkit-columns:128em;
columns:128em;
}
上述代碼中所聲明的意思就是列的寬度為：8em，但是總的列數不會超過12個。
下面我們就來看一個css3多列布局的完整實現代碼：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>多列布局</title>
<style>
.div{
column-count:3;
column-gap:90px;
column-rule:1pxdashedgreen;
column-width:370px;
}
.divh2{
text-align:center;
-webkit-column-span:all;
}
</style>
</head>
<body>
<div>
<h2>我的愛好</h2>
<h4>第一段內容</h4>
<p>每個人都生活在成長當中，在成長當中也會有更多的夢想，更多的堅持！慢慢凝結成成長的深海。我=畫畫</p>
<h4>第二段內容</h4>
<p>畫畫，這個愛好如此的平凡！卻感染著大部分女孩的心！看著筆在手中輕輕揮動，紙上一切都活了！走了起來！一片栩栩如生。在學校的一次美術課上，美術老師展示著別的班同學的畫，個個栩栩如生，活靈活現！我羨慕極了！小小的心靈被這些美麗的畫驚醒了。讓我下定了決心，努力地堅持學習美術，學號美術！讓我的手用筆一揮也能描述出這種境界！</p>
<h4>第三段內容</h4>
<p>畫畫，這個愛好如此的平凡！卻感染著大部分女孩的心！看著筆在手中輕輕揮動，紙上一切都活了！走了起來！一片栩栩如生。在學校的一次美術課上，美術老師展示著別的班同學的畫，個個栩栩如生，活靈活現！我羨慕極了！小小的心靈被這些美麗的畫驚醒了。讓我下定了決心，努力地堅持學習美術，學號美術！讓我的手用筆一揮也能描述出這種境界！</p>
<h4>第四段內容</h4>
<p>畫畫，這個愛好如此的平凡！卻感染著大部分女孩的心！看著筆在手中輕輕揮動，紙上一切都活了！走了起來！一片栩栩如生。在學校的一次美術課上，美術老師展示著別的班同學的畫，個個栩栩如生，活靈活現！我羨慕極了！小小的心靈被這些美麗的畫驚醒了。讓我下定了決心，努力地堅持學習美術，學號美術！讓我的手用筆一揮也能描述出這種境界！</p>
<h4>第五段內容</h4>
<p>畫畫，這個愛好如此的平凡！卻感染著大部分女孩的心！看著筆在手中輕輕揮動，紙上一切都活了！走了起來！一片栩栩如生。在學校的一次美術課上，美術老師展示著別的班同學的畫，個個栩栩如生，活靈活現！我羨慕極了！小小的心靈被這些美麗的畫驚醒了。讓我下定了決心，努力地堅持學習美術，學號美術！讓我的手用筆一揮也能描述出這種境界！</p>
</div>
</body>
</html>
到此，相信大家對“css3多列布局怎么實現”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
