對于固定列布局，position和float都可以實現 對于流體多列布局，如果是寬度固定可以使用float布局，但是寬高不確定的動態的內容無法伸縮自適應，基本無能力 **二．屬性及版本** CSS3 提供了?columns 多列布局屬性等?7 個屬性集合，具體如下： | **屬性** | **說明** | | --- | --- | | columns | 集成 column-width?和 column-count?兩個屬性 | | column-width | 定義每列列寬度 | | column-count | 定義分分列列數 | | column-gap | 定義列間距 | | column-rule | 定義列邊框 | | column-span | 定義多列布局中子元素跨列效果，firefox?不支持 | | column-fill | 控制每列的列高效果，主流瀏覽器不支持 | 由于 column?屬性集尚未納入標準，大多數瀏覽器必須使用廠商前綴才能訪問，好在主流的瀏覽器都可以很好的支持了。下面是主流瀏覽器的支持和前綴情況。 | | Opera | Firefox | Chrome | Safari | IE | | --- | --- | --- | --- | --- | --- | --- | | 支持需帶前綴 | 11.5 ~ 29 | 2 ~ 40 | 4 ~ 45 | 3.1 ~ 8 | 無 | | 支持不帶前綴 | 無 | 無 | 無 | 無 | 10.0+ | 通過上面的表格，我們可以了解到，要想讓最新的瀏覽器全部實現效果，都必須使用前綴。 //完整形式 ~~~ -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，則一直保持四列。 | **屬性** | **說明** | | --- | --- | | auto | 默認值，自適應。 | | 長度值 | 設置列寬。 | **3.column-count** column-count 屬性，用于設置多少列。 //設置列數 ~~~ -moz-column-count: 4; ~~~ | **屬性值** | **說明** | | --- | --- | | auto | 默認值，表示就 1?列。 | | 數值 | 設置列數。 | **4.column-gap** column-gap 屬性，用于設置列間距 //設置列間距 ~~~ -moz-column-gap: 100px;? ~~~ | **屬性值** | **說明** | | --- | --- | | auto | 默認值，表示就 1?列。 | | 數值 | 設置列數。 | **5.column-rule** column-rule 屬性，設置每列中間的分割線//設置列邊線 ~~~ -moz-column-rule: 2px dashed gray;? ~~~ | **屬性** | **說明** | | --- | --- | | column-rule | 的邊框簡寫形式。 | | column-rule-width | 單獨設置邊框寬度。 | | column-rule-style | 單獨設置邊框的樣式。 | | column-rule-color | 單獨設置邊框的顏色。 | 列邊線不會影響到布局，它會根據布局的縮放自我調整是否顯示。如果我們把頁面縮放到只能顯示一列時，它自動消失了。 **6.column-span** column-span 屬性，設置跨列大標題。 //跨列標題，由于火狐尚未支持，固使用?webkit ~~~ -webkit-column-span: all;? ~~~ | **屬性** | **說明** | | --- | --- | | none | 默認值，表示不跨列。 | | all | 表示跨列。 |