CSS3 多列
CSS3 可以將文本內(nèi)容設(shè)計(jì)成像報(bào)紙一樣的多列布局,如下實(shí)例:
php中文網(wǎng) - php中文網(wǎng)php中文網(wǎng)(miracleart.cn)提供了最全的編程技術(shù)基礎(chǔ)教程, 介紹了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各種編程語言的基礎(chǔ)知識。 同時(shí)本站中也提供了大量的在線實(shí)例,通過實(shí)例,您可以更好的學(xué)習(xí)編程。
瀏覽器支持
表格中的數(shù)字表示支持該方法的第一個(gè)瀏覽器的版本號。
緊跟在數(shù)字后面的 -webkit- 或 -moz- 為指定瀏覽器的前綴。
CSS3 多列屬性
本章節(jié)我們將學(xué)習(xí)以下幾個(gè) CSS3 的多列屬性:
column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width
CSS3 創(chuàng)建多列
column-count
屬性指定了需要分割的列數(shù)。
以下實(shí)例將 <div> 元素中的文本分為 3 列:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> .newspaper { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; } </style> </head> <body> <p><b>注意:</b> Internet Explorer 9及更早 IE 版本瀏覽器不支持 column-count 屬性。</p> <div class="newspaper"> “當(dāng)我年輕的時(shí)候,我夢想改變這個(gè)世界;當(dāng)我成熟以后,我發(fā)現(xiàn)我不能夠改變這個(gè)世界,我將目光縮短了些,決定只改變我的國家;當(dāng)我進(jìn)入暮年以后,我發(fā)現(xiàn)我不能夠改變我們的國家,我的最后愿望僅僅是改變一下我的家庭,但是,這也不可能。當(dāng)我現(xiàn)在躺在床上,行將就木時(shí),我突然意識到:如果一開始我僅僅去改變我自己,然后,我可能改變我的家庭;在家人的幫助和鼓勵(lì)下,我可能為國家做一些事情;然后,誰知道呢?我甚至可能改變這個(gè)世界?!? </div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
CSS3 多列中列與列間的間隙
column-gap
屬性指定了列與列間的間隙。
以下實(shí)例指定了列與列間的間隙為 40 像素:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> .newspaper { -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; } </style> </head> <body> <p><b>注意:</b> Internet Explorer 9及更早 IE 版本瀏覽器不支持 column-count 屬性。</p> <div class="newspaper"> 當(dāng)我年輕的時(shí)候,我夢想改變這個(gè)世界;當(dāng)我成熟以后,我發(fā)現(xiàn)我不能夠改變這個(gè)世界,我將目光縮短了些,決定只改變我的國家;當(dāng)我進(jìn)入暮年以后,我發(fā)現(xiàn)我不能夠改變我們的國家,我的最后愿望僅僅是改變一下我的家庭,但是,這也不可能。當(dāng)我現(xiàn)在躺在床上,行將就木時(shí),我突然意識到:如果一開始我僅僅去改變我自己,然后,我可能改變我的家庭;在家人的幫助和鼓勵(lì)下,我可能為國家做一些事情;然后,誰知道呢?我甚至可能改變這個(gè)世界。 </div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
CSS3 列邊框
column-rule-style
屬性指定了列與列間的邊框樣式:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> .newspaper { column-count:3; column-gap:40px; column-rule-style:dotted; /* Firefox */ -moz-column-count:3; -moz-column-gap:40px; -moz-column-rule-style:dotted; /* Safari and Chrome */ -webkit-column-count:3; -webkit-column-gap:40px; -webkit-column-rule-style:dotted; } </style> </head> <body> <p><b>注意:</b> Internet Explorer 9及更早 IE 版本瀏覽器不支持 column-count 屬性。</p> <div class="newspaper"> 當(dāng)我年輕的時(shí)候,我夢想改變這個(gè)世界;當(dāng)我成熟以后,我發(fā)現(xiàn)我不能夠改變這個(gè)世界,我將目光縮短了些,決定只改變我的國家;當(dāng)我進(jìn)入暮年以后,我發(fā)現(xiàn)我不能夠改變我們的國家,我的最后愿望僅僅是改變一下我的家庭,但是,這也不可能。當(dāng)我現(xiàn)在躺在床上,行將就木時(shí),我突然意識到:如果一開始我僅僅去改變我自己,然后,我可能改變我的家庭;在家人的幫助和鼓勵(lì)下,我可能為國家做一些事情;然后,誰知道呢?我甚至可能改變這個(gè)世界。 </div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
column-rule-width
屬性指定了兩列的邊框厚度:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> .newspaper { column-count:3; column-gap:40px; column-rule-style:outset; column-rule-width:10px; /* Firefox */ -moz-column-count:3; -moz-column-gap:40px; -moz-column-rule-style:outset; -moz-column-rule-width:10px; /* Safari and Chrome */ -webkit-column-count:3; -webkit-column-gap:40px; -webkit-column-rule-style:outset; -webkit-column-rule-width:1px; } </style> </head> <body> <p><b>注意:</b> Internet Explorer 9及更早 IE 版本瀏覽器不支持 column-count 屬性。</p> <div class="newspaper"> 當(dāng)我年輕的時(shí)候,我夢想改變這個(gè)世界;當(dāng)我成熟以后,我發(fā)現(xiàn)我不能夠改變這個(gè)世界,我將目光縮短了些,決定只改變我的國家;當(dāng)我進(jìn)入暮年以后,我發(fā)現(xiàn)我不能夠改變我們的國家,我的最后愿望僅僅是改變一下我的家庭,但是,這也不可能。當(dāng)我現(xiàn)在躺在床上,行將就木時(shí),我突然意識到:如果一開始我僅僅去改變我自己,然后,我可能改變我的家庭;在家人的幫助和鼓勵(lì)下,我可能為國家做一些事情;然后,誰知道呢?我甚至可能改變這個(gè)世界。 </div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
column-rule-color
屬性指定了兩列的邊框顏色:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> .newspaper { column-count:3; column-gap:40px; column-rule-style:outset; column-rule-color:#ff0000; /* Firefox */ -moz-column-count:3; -moz-column-gap:40px; -moz-column-rule-style:outset; -moz-column-rule-color:#ff0000; /* Safari and Chrome */ -webkit-column-count:3; -webkit-column-gap:40px; -webkit-column-rule-style:outset; -webkit-column-rule-color:#ff0000; } </style> </head> <body> <p><b>注意:</b> Internet Explorer 9及更早 IE 版本瀏覽器不支持 column-count 屬性。</p> <div class="newspaper"> 當(dāng)我年輕的時(shí)候,我夢想改變這個(gè)世界;當(dāng)我成熟以后,我發(fā)現(xiàn)我不能夠改變這個(gè)世界,我將目光縮短了些,決定只改變我的國家;當(dāng)我進(jìn)入暮年以后,我發(fā)現(xiàn)我不能夠改變我們的國家,我的最后愿望僅僅是改變一下我的家庭,但是,這也不可能。當(dāng)我現(xiàn)在躺在床上,行將就木時(shí),我突然意識到:如果一開始我僅僅去改變我自己,然后,我可能改變我的家庭;在家人的幫助和鼓勵(lì)下,我可能為國家做一些事情;然后,誰知道呢?我甚至可能改變這個(gè)世界。 </div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
column-rule
屬性是 column-rule-* 所有屬性的簡寫。
以下實(shí)例設(shè)置了列直接的邊框的厚度,樣式及顏色:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> .newspaper { -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; -moz-column-rule:4px outset #ff00ff; /* Firefox */ -webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */ column-rule:4px outset #ff00ff; } </style> </head> <body> <p><b>注意:</b> Internet Explorer 9及更早 IE 版本瀏覽器不支持 column-count 屬性。</p> <div class="newspaper"> 當(dāng)我年輕的時(shí)候,我夢想改變這個(gè)世界;當(dāng)我成熟以后,我發(fā)現(xiàn)我不能夠改變這個(gè)世界,我將目光縮短了些,決定只改變我的國家;當(dāng)我進(jìn)入暮年以后,我發(fā)現(xiàn)我不能夠改變我們的國家,我的最后愿望僅僅是改變一下我的家庭,但是,這也不可能。當(dāng)我現(xiàn)在躺在床上,行將就木時(shí),我突然意識到:如果一開始我僅僅去改變我自己,然后,我可能改變我的家庭;在家人的幫助和鼓勵(lì)下,我可能為國家做一些事情;然后,誰知道呢?我甚至可能改變這個(gè)世界。 </div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
指定元素跨越多少列
以下實(shí)例指定 <h2> 元素跨越所有列:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> .newspaper { column-count:3; -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ } h2 { column-span:all; -webkit-column-span:all; /* Safari and Chrome */ } </style> </head> <body> <p><b>注意:</b> Internet Explorer 9及更早 IE 版本瀏覽器不支持 column-count 屬性。</p> <div class="newspaper"> <h2>英國維斯米斯特教堂碑文</h2> 當(dāng)我年輕的時(shí)候,我夢想改變這個(gè)世界;當(dāng)我成熟以后,我發(fā)現(xiàn)我不能夠改變這個(gè)世界,我將目光縮短了些,決定只改變我的國家;當(dāng)我進(jìn)入暮年以后,我發(fā)現(xiàn)我不能夠改變我們的國家,我的最后愿望僅僅是改變一下我的家庭,但是,這也不可能。當(dāng)我現(xiàn)在躺在床上,行將就木時(shí),我突然意識到:如果一開始我僅僅去改變我自己,然后,我可能改變我的家庭;在家人的幫助和鼓勵(lì)下,我可能為國家做一些事情;然后,誰知道呢?我甚至可能改變這個(gè)世界。 </div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
指定列的寬度
column-width
屬性指定了列的寬度。
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> .newspaper { column-width:100px; -moz-column-width:100px; /* Firefox */ -webkit-column-width:100px; /* Safari and Chrome */ } </style> </head> <body> <p><b>注意:</b> Internet Explorer 9及更早 IE 版本瀏覽器不支持 column-count 屬性。</p> <div class="newspaper"> 當(dāng)我年輕的時(shí)候,我夢想改變這個(gè)世界;當(dāng)我成熟以后,我發(fā)現(xiàn)我不能夠改變這個(gè)世界,我將目光縮短了些,決定只改變我的國家;當(dāng)我進(jìn)入暮年以后,我發(fā)現(xiàn)我不能夠改變我們的國家,我的最后愿望僅僅是改變一下我的家庭,但是,這也不可能。當(dāng)我現(xiàn)在躺在床上,行將就木時(shí),我突然意識到:如果一開始我僅僅去改變我自己,然后,我可能改變我的家庭;在家人的幫助和鼓勵(lì)下,我可能為國家做一些事情;然后,誰知道呢?我甚至可能改變這個(gè)世界。 </div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
CSS3 多列屬性
下表列出了所有 CSS3 的多列屬性:
屬性 | 描述 |
---|---|
column-count | 指定元素應(yīng)該被分割的列數(shù)。 |
column-fill | 指定如何填充列 |
column-gap | 指定列與列之間的間隙 |
column-rule | 所有 column-rule-* 屬性的簡寫 |
column-rule-color | 指定兩列間邊框的顏色 |
column-rule-style | 指定兩列間邊框的樣式 |
column-rule-width | 指定兩列間邊框的厚度 |
column-span | 指定元素要跨越多少列 |
column-width | 指定列的寬度 |
columns | 設(shè)置 column-width 和 column-count 的簡寫 |