css3中多列布局的示例分析
這篇文章主要介紹css3中多列布局的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
專注于為中小企業(yè)提供網(wǎng)站設計制作、成都網(wǎng)站制作服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)大足免費做網(wǎng)站提供優(yōu)質(zhì)的服務。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了超過千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設實現(xiàn)規(guī)模擴充和轉變。
一、什么是多列布局？
CSS3中新出現(xiàn)的多列布局(multi-column)是傳統(tǒng)HTML網(wǎng)頁中塊狀布局模式的有力擴充。這種新語法能夠讓WEB開發(fā)人員輕松的讓文本呈現(xiàn)多列顯示。我們知道，當一行文字太長時，讀者讀起來就比較費勁，有可能讀錯行或讀串行；人們的視點從文本的一端移到另一端、然后換到下一行的行首，如果眼球移動浮動過大，他們的注意力就會減退，容易讀不下去。所以，為了最大效率的使用大屏幕顯示器，頁面設計中需要限制文本的寬度，讓文本按多列呈現(xiàn)，就像報紙上的新聞排版一樣。例：
二、columns屬性介紹與用法
1.創(chuàng)建多列（列個數(shù) 和 列寬度）
不管想讓一段文本呈多少列顯示，你需要的只是兩個屬性：column-count 和 column-width。
column-count 屬性設置列的具體個數(shù)，例如：
多列布局
.demo{
width: 500px;
height: 100px;
margin: auto;
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;
}
CSS里一直有一個讓我們頭疼的問題，就是創(chuàng)建布局很麻煩。當然，有很多方式，有很多技術都可以創(chuàng)建各種布局，但我們總覺得CSS里應該提供一些新屬性，讓我們能更好的管理布局。幸運的是，CSS3里提供了一批新的創(chuàng)建列式布局的column屬性，有了這些屬性，我們不需要再使用float,clear,margin等屬性進行調(diào)控，避免了很多麻煩。
效果圖：
column-width屬性控制列的寬度。如果你沒有提供column-count屬性值，那么，瀏覽器就是自主決定將文本分成合適的列數(shù)。例：
多列布局
.demo{
width: 500px;
height: 100px;
margin: auto;
column-width:100px;
-moz-column-width:100px; /* Firefox */
-webkit-column-width:100px; /* Safari and Chrome */
}
CSS里一直有一個讓我們頭疼的問題，就是創(chuàng)建布局很麻煩。當然，有很多方式，有很多技術都可以創(chuàng)建各種布局，但我們總覺得CSS里應該提供一些新屬性，讓我們能更好的管理布局。幸運的是，CSS3里提供了一批新的創(chuàng)建列式布局的column屬性，有了這些屬性，我們不需要再使用float,clear,margin等屬性進行調(diào)控，避免了很多麻煩。
效果圖：
2.多列中的列與列間的間隙（column-gap 屬性）
column-gap 屬性指定了列與列間的間隙。缺省情況下這個間隔寬度是1em，但如果你使用column-gap屬性，就會修改這個缺省的寬度值：
多列布局
.demo{
width: 500px;
height: 150px;
margin: auto;
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
}
CSS里一直有一個讓我們頭疼的問題，就是創(chuàng)建布局很麻煩。當然，有很多方式，有很多技術都可以創(chuàng)建各種布局，但我們總覺得CSS里應該提供一些新屬性，讓我們能更好的管理布局。幸運的是，CSS3里提供了一批新的創(chuàng)建列式布局的column屬性，有了這些屬性，我們不需要再使用float,clear,margin等屬性進行調(diào)控，避免了很多麻煩。
然而，有時候，我們需要設定列的最大高度，這個時候，文本內(nèi)容會從第一列開始填充，然后第二列，第三列，也許以后的列會填不滿，也許會溢出。所以，當對多列布局設定了height或max-height屬性值后，列會伸長到指定高度——無論內(nèi)容有多少，夠不夠或超不超。
CSS3的多列布局(columns)是一種方便web前端開發(fā)者高效利用寬屏顯示器的非常有用的功能特征。你會發(fā)現(xiàn)在很多地方都需要用到它們，特別是需要自動平衡列高度的地方。
以上是“css3中多列布局的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
重慶分公司
重慶分公司
