通過 css3，您能夠建立多個列來對文字進行布局 - 就像報紙那樣！
屬性版本
描述columns
css3
設定或檢索物件的列數和每列的寬度。復合屬性
column-width
css3
設定或檢索物件每列的寬度
column-count
css3
設定或檢索物件的列數
column-gap
css3
設定或檢索物件的列與列之間的間隙
column-rule
css3
設定或檢索物件的列與列之間的邊框。復合屬性
column-rule-width
css3
設定或檢索物件的列與列之間的邊框厚度。
column-rule-style
css3
設定或檢索物件的列與列之間的邊框樣式。
column-rule-color
css3
設定或檢索物件的列與列之間的邊框顏色。
column-span
css3
設定或檢索物件元素是否橫跨所有列。
column-fill
css3
設定或檢索物件所有列的高度是否統一。
column-break-before
css3
設定或檢索物件之前是否斷行。
column-break-after
css3
設定或檢索物件之前是否斷行。
column-break-inside
css3
設定或檢索物件內部是否斷行。
（1）如果不設定 column-count 時
顯示列數 = （總寬度+列間距）/ (列寬度+列間距)條件顯示列數
(列寬度+列間距)*列數 -列間距 <= 盒子寬度
顯示列數量
(列寬度+列間距)*列數 -列間距 <= 盒子寬度
(總寬度+列間距）/ (列寬度+列間距)
源**：
column-width:200px;
column-gap: 100px;
column-count: 3;
width: 800px;
column-rule: 150px solid red;
(column-width:200px+column-gap:100px)*(column-count:3)-(column-gap:100px)
<=800px
因此顯示列數 = 設定列數;
column-rule-width的值，不影響列數顯示。
css3中新出現的多列布局(multi-column)是傳統html網頁中塊狀布局模式的有力擴充。這種新語法能夠讓web開發人員輕鬆的讓文字呈現多列顯示。我們知道，當一行文字太長時，讀者讀起來就比較費勁，有可能讀錯行或讀序列；人們的視點從文字的一端移到另一端、然後換到下一行的行首，如果眼球移動浮動過大，他們的注意力就會減退，容易讀不下去。所以，為了最大效率的使用大螢幕顯示器，頁面設計中需要限制文字的寬度，讓文字按多列呈現，就像報紙上的新聞排版一樣。
column-width:200px;
column-gap: 100px;
column-count: 3;
width: 799px;
column-rule: 150px solid red;
(column-width:200px+column-gap:100px)*(column-count:3)-(column-gap:100px)
>799px
因此顯示列數 = (799+100)/(200+100)=2;
column-rule-width的值，不影響列數顯示。
css3中新出現的多列布局(multi-column)是傳統html網頁中塊狀布局模式的有力擴充。這種新語法能夠讓web開發人員輕鬆的讓文字呈現多列顯示。我們知道，當一行文字太長時，讀者讀起來就比較費勁，有可能讀錯行或讀序列；人們的視點從文字的一端移到另一端、然後換到下一行的行首，如果眼球移動浮動過大，他們的注意力就會減退，容易讀不下去。所以，為了最大效率的使用大螢幕顯示器，頁面設計中需要限制文字的寬度，
image.png
CSS多列布局
多列布局適合純文字版式設計，如報紙內和雜誌類網頁布局，不適合做網頁結構布局。靈活使用多列布局特性，可以實現在多列中顯示文字和，從而節省大量的網頁空間。如果網頁上的文字很長，多列布局特性就能夠發揮它的用武之地。相容性參考 columns是多列布局特性的基本屬性，類似邊框特性中的border屬性，該屬性...
CSS多列布局
效果 我的爸爸剛剛30出頭，他的面容，要比他的年齡，成熟穩重的多，但是，他可沒有蒼老憔悴哦！爸爸的身高有180公分，體重75公斤，是個標準的型男身材。如果，我說我爸爸是個大帥哥，可一點也沒有撒謊呢！在我們小區裡，就組建了乙個籃球隊，爸爸，可是他那隊裡的佼佼者呢！每當，我們小區和其他小區，有籃球比賽的...
CSS多列布局
個人部落格 需要注意的是 本篇文章的布局，都未對父元素進行清除浮動的操作，所以在有一些使用了float的布局中，需要在parent容器清除浮動，才能在實際情況下使用。清除浮動的方式在這裡不做討論 這部分的html結構如下 left right right 大家先來看看直接在左側新增浮動是怎麼樣的吧 ...