溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了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: 12 8em;
-webkit-columns: 12 8em;
columns: 12 8em;
}上述代碼中所聲明的意思就是列的寬度為：8em，但是總的列數不會超過 12 個。
下面我們就來看一個css3多列布局的完整實現代碼：
<!DOCTYPE html>
<html>
<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>多列布局</title>
<style>
.div {
column-count: 3;
column-gap: 90px;
column-rule: 1px dashed green;
column-width: 370px;
}
.div h2 {
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多列布局效果如下：
說明：
CSS3 的 Column 布局規范要求每一列的高度保持平衡：瀏覽器會自動設置列布局塊的最大高度，并保證其它列的高度與最大高度大致相等。
不過在某些情況下，可能需要顯式的設置列的高度。此時列布局會從第一個列開始填充內容，并盡可能根據聲明或者計算的個數創建列，如果內容過多則向右溢出。
感謝你能夠認真閱讀完這篇文章，希望小編分享css3怎么實現多列布局內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
