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

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

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

創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比芝罘網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式芝罘網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋芝罘地區(qū)。費用合理售后完善，十年實體公司更值得信賴。

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

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

-moz-column-width: 200px;
這里設(shè)置了 200px，有點最小寬度的意思。當(dāng)瀏覽器縮放到小于 200 大小時，將變成 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è)置每列中間的分割線
//設(shè)置列邊線
-moz-column-rule: 2px dashed gray;

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

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

網(wǎng)頁名稱：CSS3多列布局
轉(zhuǎn)載來源：http://jinyejixie.com/article14/iisgge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、域名注冊、自適應(yīng)網(wǎng)站、網(wǎng)站設(shè)計、動態(tài)網(wǎng)站、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)