屬性及版本
CSS3 提供了 columns 多列布局屬性等 7 個(gè)屬性集合，具體如下：

由于 column 屬性集尚未納入標(biāo)準(zhǔn)，大多數(shù)瀏覽器必須使用廠(chǎng)商前綴才能訪(fǎng)問(wèn)，好在主流的瀏覽器都可以很好的支持了。下面是主流瀏覽器的支持和前綴情況。

通過(guò)上面的表格，我們可以了解到，要想讓最新的瀏覽器全部實(shí)現(xiàn)效果，都必須使用前
綴。
//完×××式
-webkit-columns: 150px 4;
-moz-columns: 150px 4; columns: border-box;

讓客戶(hù)滿(mǎn)意是我們工作的目標(biāo)，不斷超越客戶(hù)的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶(hù)，將通過(guò)不懈努力成為客戶(hù)在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊(cè)、虛擬空間、營(yíng)銷(xiāo)軟件、網(wǎng)站建設(shè)、浉河網(wǎng)站維護(hù)、網(wǎng)站推廣。

屬性解釋
為了方便演示，我們?cè)?Firefox 火狐瀏覽器測(cè)試，只用-moz-前綴演示。
1.columns
columns 是一個(gè)復(fù)合屬性，包含 columns-width 和 columns-count 這兩種簡(jiǎn)寫(xiě)。意為同時(shí)設(shè)置分列列數(shù)和分列寬度。
//分成四列，每列寬度自適應(yīng)
-moz-columns: auto 4;

2.column-width
column-width 屬性，用于設(shè)置每列的寬度。
//設(shè)置列寬

-moz-column-width: 200px;
這里設(shè)置了 200px，有點(diǎn)最小寬度的意思。當(dāng)瀏覽器縮放到小于 200 大小時(shí)，將變成 1
列顯示。而如果是 auto，則一直保持四列。

3.column-count
column-count 屬性，用于設(shè)置多少列。
//設(shè)置列數(shù)
-moz-column-count: 4;

4.column-gap
column-gap 屬性，用于設(shè)置列間距
//設(shè)置列間距
-moz-column-gap: 100px;

5.column-rule
column-rule 屬性，設(shè)置每列中間的分割線(xiàn)
//設(shè)置列邊線(xiàn)
-moz-column-rule: 2px dashed gray;

列邊線(xiàn)不會(huì)影響到布局，它會(huì)根據(jù)布局的縮放自我調(diào)整是否顯示。如果我們把頁(yè)面縮放 到只能顯示一列時(shí)，它自動(dòng)消失了。

6.column-span
column-span 屬性，設(shè)置跨列大標(biāo)題。
//跨列標(biāo)題，由于火狐尚未支持，固使用 webkit
-webkit-column-span: all;

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)頁(yè)標(biāo)題：CSS3多列布局-創(chuàng)新互聯(lián)
文章轉(zhuǎn)載：http://weahome.cn/article/ddepji.html