如何利用column多列屬性調(diào)整頁面文字列布局

今天就跟大家聊聊有關(guān)如何利用column多列屬性調(diào)整頁面文字列布局，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

column多列屬性

column-count:欄目數(shù)

兼容性寫法：

CSS Code復(fù)制內(nèi)容到剪貼板

1. -webkit-column-count:3   

2. -moz-column-count:3  

column-width 屬性規(guī)定列的寬度。

column-gap屬性規(guī)定列之間的間隔
column-rule 屬性設(shè)置列之間的寬度、樣式和顏色規(guī)則。

CSS3中新出現(xiàn)的多列布局(multi-column)是傳統(tǒng)HTML網(wǎng)頁中塊狀布局模式的有力擴充。這種新語法能夠讓W(xué)EB開發(fā)人員輕松的讓文本呈現(xiàn)多列顯示。我們知道，當(dāng)一行文字太長時，讀者讀起來就比較費勁，有可能讀錯行或讀串行；人們的視點從文本的一端移到另一端、然后換到下一行的行首，如果眼球移動浮動過大，他們的注意力就會減退，容易讀不下去。所以，為了最大效率的使用大屏幕顯示器，頁面設(shè)計中需要限制文本的寬度，讓文本按多列呈現(xiàn)，就像報紙上的新聞排版一樣。

但是在CSS3的多列布局(columns)語法功能出現(xiàn)之前，人們?nèi)绻胱屛谋境识嗔酗@示，要么使用絕對定位，手動給文本分段落，或者使用JS腳本等，而新語法的出現(xiàn)，徹底改變了這樣的局面。
多列(columns)的用法
列個數(shù) 和 列寬度

不管想讓一段文本呈多少列顯示，你需要的只是兩個屬性：column-count 和 column-width。

column-count 屬性設(shè)置列的具體個數(shù)，例如：

<div style="column-count:2;">CSS里一直有一個讓我們頭疼的問題，就是創(chuàng)建布局很麻煩。當(dāng)然，有很多方式，有很多技術(shù)都可以創(chuàng)建各種布局，但我們總覺得CSS里應(yīng)該提供一些新屬性，讓我們能更好的管理布局。幸運的是，CSS3里提供了一批新的創(chuàng)建列式布局的column屬性，有了這些屬性，我們不需要再使用float,clear,margin等屬性進行調(diào)控，避免了很多麻煩。</div>

這將會使文本里的內(nèi)容顯示成兩列(首先你的瀏覽器要支持這種新語法，比如火狐瀏覽器、谷歌瀏覽器，IE10+等)：

column-width屬性控制列的寬度。如果你沒有提供column-count屬性值，那么，瀏覽器就是自主決定將文本分成合適的列數(shù)。

<div style="column-width:10em;">CSS里一直有一個讓我們頭疼的問題，就是創(chuàng)建布局很麻煩。當(dāng)然，有很多方式，有很多技術(shù)都可以創(chuàng)建各種布局，但我們總覺得CSS里應(yīng)該提供一些新屬性，讓我們能更好的管理布局。幸運的是，CSS3里提供了一批新的創(chuàng)建列式布局的column屬性，有了這些屬性，我們不需要再使用float,clear,margin等屬性進行調(diào)控，避免了很多麻煩。</div>

就變成了這樣：

在一個多列的文本塊里，文本內(nèi)容會自動的一列一列的填充。
多列布局columns語法簡寫

大多時候，WEB程序員只需要同時使用這兩個屬中的一個：column-count 或 column-width?；蛘邇蓚€同時使用，幸運的是，這兩個屬性的屬性值是不同單位，不會搞混，所以就有了簡寫方式，columns，例如：

我們之前寫的 column-width:12em 可以用下面的寫法替換：

<div style="columns:12em">CSS里一直有一個讓我們頭疼的問題，就是創(chuàng)建布局很麻煩。當(dāng)然，有很多方式，有很多技術(shù)都可以創(chuàng)建各種布局，但我們總覺得CSS里應(yīng)該提供一些新屬性，讓我們能更好的管理布局。幸運的是，CSS3里提供了一批新的創(chuàng)建列式布局的column屬性，有了這些屬性，我們不需要再使用float,clear,margin等屬性進行調(diào)控，避免了很多麻煩。</div>。

而之前寫的 column-count:4 可以用以下語法簡寫替換：
<div style="columns:4">CSS里一直有一個讓我們頭疼的問題，就是創(chuàng)建布局很麻煩。當(dāng)然，有很多方式，有很多技術(shù)都可以創(chuàng)建各種布局，但我們總覺得CSS里應(yīng)該提供一些新屬性，讓我們能更好的管理布局。幸運的是，CSS3里提供了一批新的創(chuàng)建列式布局的column屬性，有了這些屬性，我們不需要再使用float,clear,margin等屬性進行調(diào)控，避免了很多麻煩。</div>

而同時聲明了 column-width:8em 和 column-count:12 的情況可以用以下簡寫替換：
<div style="columns:12 8em">CSS里一直有一個讓我們頭疼的問題，就是創(chuàng)建布局很麻煩。當(dāng)然，有很多方式，有很多技術(shù)都可以創(chuàng)建各種布局，但我們總覺得CSS里應(yīng)該提供一些新屬性，讓我們能更好的管理布局。幸運的是，CSS3里提供了一批新的創(chuàng)建列式布局的column屬性，有了這些屬性，我們不需要再使用float,clear,margin等屬性進行調(diào)控，避免了很多麻煩。</div>

列高度的平衡

CSS3規(guī)范里描述的是，各列的高度是均衡的，瀏覽器會自動調(diào)整每列里填充多少文本、均分文本，來使各列的高度保持均衡一致。

然而，有時候，我們需要設(shè)定列的最大高度，這個時候，文本內(nèi)容會從第一列開始填充，然后第二列，第三列，也許以后的列會填不滿，也許會溢出。所以，當(dāng)對多列布局設(shè)定了height或max-height屬性值后，列會伸長到指定高度&mdash;&mdash;無論內(nèi)容有多少，夠不夠或超不超。
列之間的縫隙間隔寬度

兩列之間會有縫隙間隔。缺省情況下這個間隔寬度是1em，但如果你使用column-gap屬性，就會修改這個缺省的寬度值：

<div style="column-width:20em; column-gap:2em;">CSS里一直有一個讓我們頭疼的問題，就是創(chuàng)建布局很麻煩。當(dāng)然，有很多方式，有很多技術(shù)都可以創(chuàng)建各種布局，但我們總覺得CSS里應(yīng)該提供一些新屬性，讓我們能更好的管理布局。幸運的是，CSS3里提供了一批新的創(chuàng)建列式布局的column屬性，有了這些屬性，我們不需要再使用float,clear,margin等屬性進行調(diào)控，避免了很多麻煩。</div>

列布局的瀏覽器完美兼容

對于一些不支持多列布局特征的瀏覽器，比如IE9/IE8，會把這些屬性全部忽略，這樣布局就呈現(xiàn)出傳統(tǒng)的單塊布局。

為了保證瀏覽器最大的兼容性，我們在使用多列布局屬性時，最好添加瀏覽器引擎前綴，最基本的要加上三種：谷歌瀏覽器的-webkit-，火狐瀏覽器的-moz-，IE瀏覽器的-ms-，最后，別忘了不帶前綴的寫法。

CSS3的多列布局(columns)是一種方便WEB開發(fā)者高效利用寬屏顯示器的非常有用的功能特征。

看完上述內(nèi)容，你們對如何利用column多列屬性調(diào)整頁面文字列布局有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。