css新增了多列布局特性，可以讓瀏覽器確定何時結束一列和開始下一列，無需任何額外的標記。簡單來說，就是css3多列布局可以自動將內容按指定的列數排列，這種特性實現的布局效果和報紙、雜誌類排版非常相似。本文將詳細介紹css多列布局的基本屬性和用法
[注意]ie10+和chrome瀏覽器支援標準寫法，而firefox、safari瀏覽器及移動端android、ios需要新增字首
column-width
值: auto |
初始值: auto
應用於: block、inline-block、table-cell(firefox不支援為table-cell設定該屬性)
繼承性: 無
[注意]column-width不可為0和負值；當column-width的值為auto或column-width的值大於元素寬度width一半時，沒有分列效果(更準確地，由其他屬性來決定)
column-count
值: auto |
初始值: auto
應用於: block、inline-block、table-cell(firefox不支援為table-cell設定該屬性)
繼承性: 無
[注意]column-count不可為0和負值；當column-count的值為auto時，預設沒有分列效果(更準確地，由其他屬性來決定)
列間距column-gap用於定義相鄰兩列之間的空白間距
column-gap
值: normal |
初始值: normal
應用於: block、inline-block、table-cell
繼承性: 無
[注意]column-gap的normal值預設情況下相當於1em。column-gap值不可為負值
column-rule
值: || ||
標準中說column-rule類似於border，但實際更類似於outline，因為該樣式並不佔據實際的物理尺寸。outline詳細情況移步至此
[注意]如果column-rule-width的寬度大於column-gap的寬度，則可能會顯示在列框內容中
column-span屬性用來定義子元素是否跨列
[注意]firefox不支援該屬性，ie10+和chrome瀏覽器支援標準寫法，而safari瀏覽器及移動端android、ios需要新增字首
column-span
值: none | all
初始值: none
應用於: block元素、table-cell元素(只有safari支援為table-cell設定該屬性)
繼承性: 無
none: 預設不跨列all: 跨越所有列
[注意]當跨列元素被絕對定位(包括固定定位)或浮動後，跨列將不生效
[注意]當跨列元素與column-rule的修飾線重疊時，在ie和safari中，跨列元素將覆蓋修飾線，而chrome瀏覽器存在bug，跨列元素的文字覆蓋修飾線，但跨列元素的背景可能會消失。
在列布局中，有時由於內容不足，多列中的最後列往往沒有足夠內容填充，這時要實現所有列都具有相同高度的效果，需要使用列填充屬性column-fill
column-fill
值: auto | balance
初始值: auto
應用於: block、inline-block
繼承性: 無
auto: 預設各列高度隨內容變化而變化balance: 各列高度根據內容最多的一列進行統一
[注意]目前只有firefox支援帶字首的column-fill屬性
一般地，我們只關心是否分列以及列寬多少，對列間距並不考慮。於是，column這個column-width和column-count的復合屬性就得到了比較廣泛的使用
columns: column-width || column-count
[注意]由於column-width和column-count這兩個值的單位不同，所以順序無關
元素寬度 = 列數 * 列寬 + (列數-1)*列間距 <=> 列數*(列寬+列間距) - 列間距 =元素寬度或者， 列數 = (元素寬度+列間距)/(列寬+列間距)
或者， 列寬 = (元素寬度+列間距)/列數 - 列間距
如果元素寬度為auto，且列寬和列數都不是auto
則 n = column-count w = column-width;
如果列寬為auto，但列數不是auto，元素寬度不為auto
則 n = column-count w = max(0,(元素寬度 - ((n-1)*列間距))/n)
如果列寬不為auto，但列數是auto，元素寬度不為auto
則 n = max(1,floor((元素寬度 + 列間距) / (列寬 + 列間距 )) w = ((元素寬度 + 列間距) / n) - 列間距
如果列寬和列數都不是auto，元素寬度不為auto
則 n = min(列寬 , floor((元素寬度 + 列間距) / (列寬 + 列間距))) w = ((元素寬度 + 列間距) / n) - 列間距
[注意]若列數為小數，只保留整數部分
[注意]所有的情況都是先推算出實際列數，再由實際列數推算實際列寬
CSS多列布局
多列布局適合純文字版式設計，如報紙內和雜誌類網頁布局，不適合做網頁結構布局。靈活使用多列布局特性，可以實現在多列中顯示文字和，從而節省大量的網頁空間。如果網頁上的文字很長，多列布局特性就能夠發揮它的用武之地。相容性參考 columns是多列布局特性的基本屬性，類似邊框特性中的border屬性，該屬性...
CSS多列布局
效果 我的爸爸剛剛30出頭，他的面容，要比他的年齡，成熟穩重的多，但是，他可沒有蒼老憔悴哦！爸爸的身高有180公分，體重75公斤，是個標準的型男身材。如果，我說我爸爸是個大帥哥，可一點也沒有撒謊呢！在我們小區裡，就組建了乙個籃球隊，爸爸，可是他那隊裡的佼佼者呢！每當，我們小區和其他小區，有籃球比賽的...
CSS多列布局
個人部落格 需要注意的是 本篇文章的布局，都未對父元素進行清除浮動的操作，所以在有一些使用了float的布局中，需要在parent容器清除浮動，才能在實際情況下使用。清除浮動的方式在這裡不做討論 這部分的html結構如下 left right right 大家先來看看直接在左側新增浮動是怎麼樣的吧 ...