## 20.2.1.基本概念 所謂多欄布局，就是一個盒子設置欄寬屬性或欄數量屬性，就構成多欄布局，則其中的內容，會先在第一欄展示，第一欄展示滿后，再展示到第二欄，以此類推。 多欄布局最常見的就是雜志或報紙上常見的“分欄版面”。比如雜志最常用的是分為兩欄。 多欄布局通常用于盒子內部主要以文字（行內元素）為主的情形。 給一個盒子設定欄寬屬性或欄數量屬性（二選一），就可以實現多欄布局效果。 通常效果類似這樣：  ## 20.2.2.主要屬性 * 欄寬度屬性column-width 設定分欄布局中一個欄的寬度值；實際寬度會根據外層盒子的寬度有所調整（可能變大）。 * 欄數量屬性column-count 設定分欄布局中的總欄數。 * columns屬性： 上述column-width和column-count的綜合屬性； 使用形式：columns: 欄寬值 欄目數； 實際表現上，當總寬度大于等于“欄寬x欄目數”時，欄目數固定，欄寬可能會有所調整（變大）。 當總寬度小于“欄寬x欄目數”時，欄目數會減少（保證欄寬不小于設定的欄寬）。 * 欄間隙屬性column-gap 設定欄與欄之間的寬度值，默認是font-size大小（比如14px） * 欄分割線屬性column-rule 欄分割線屬性，就是兩欄之間的線，如果不設定默認就是“空的”，就沒有分割線，只有間隙（gap）。 欄分割線屬性類似邊框線（但只是一條線），可以設定：線寬，線型，線色。 有如下幾個屬性： column-rule-width：設定線寬，比如1px，5px； column-rule-style：設定線型，比如solid，dashed，dotted； column-rule-color：設定線色，比如red， #ff9966， rgb(200,100,0) column-rule：上述3個屬性的綜合屬性。 ## 20.2.3.應用案例 實現如下圖示的分欄布局效果。