溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
屬性及版本
CSS3 提供了 columns 多列布局屬性等 7 個屬性集合，具體如下：
由于 column 屬性集尚未納入標準，大多數瀏覽器必須使用廠商前綴才能訪問，好在主流的瀏覽器都可以很好的支持了。下面是主流瀏覽器的支持和前綴情況。
通過上面的表格，我們可以了解到，要想讓最新的瀏覽器全部實現效果，都必須使用前
綴。
//完×××式
-webkit-columns: 150px 4;
-moz-columns: 150px 4; columns: border-box;
屬性解釋
為了方便演示，我們在 Firefox 火狐瀏覽器測試，只用-moz-前綴演示。
1.columns
columns 是一個復合屬性，包含 columns-width 和 columns-count 這兩種簡寫。意為同時設置分列列數和分列寬度。
//分成四列，每列寬度自適應
-moz-columns: auto 4;
2.column-width
column-width 屬性，用于設置每列的寬度。
//設置列寬
-moz-column-width: 200px;
這里設置了 200px，有點最小寬度的意思。當瀏覽器縮放到小于 200 大小時，將變成 1
列顯示。而如果是 auto，則一直保持四列。
3.column-count
column-count 屬性，用于設置多少列。
//設置列數
-moz-column-count: 4;
4.column-gap
column-gap 屬性，用于設置列間距
//設置列間距
-moz-column-gap: 100px;
5.column-rule
column-rule 屬性，設置每列中間的分割線
//設置列邊線
-moz-column-rule: 2px dashed gray;
列邊線不會影響到布局，它會根據布局的縮放自我調整是否顯示。如果我們把頁面縮放 到只能顯示一列時，它自動消失了。
6.column-span
column-span 屬性，設置跨列大標題。
//跨列標題，由于火狐尚未支持，固使用 webkit
-webkit-column-span: all;
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
