34.多列布局
要顯示2欄顯示，每欄寬度為200px，**為：
columns: 200px 2;
column-width:
在定義屬性列寬的時候能夠單獨使用或者和多列屬性中其他屬性配合使用
column-width: auto |
auto表示：元素多列的列寬將由其他屬性來決定，比如前面的示例就是由列數column-count來決定。
length：使用固定值來設定元素列的寬度，其主要是由數值和長度單位組成，不過其值只能是正值，不能為負值。
column-count:
指定想要的烈列數，和允許的最大列數
column-count：auto |
auto：只能有乙個列，且依靠瀏覽器計算自動設定
column-gap:
設定列與列之間的間距：
column-gap: normal ||
normal：預設值為1em（如果字型大小是px，預設值為你的font size）
column-rule:
定義列與列之間的邊框寬度，邊框樣式，邊框顏色。類似border屬性。但column－rule不占用空間任何位置，在列與列之間改變其寬度不會改變任何列位置
定義乙個分列元素的子元素能誇多少列。有時我們需要基中一段內容或乙個標題不進行分列，也就是橫跨所有列，此時column-span就可以輕鬆實現，此屬性的語法如下。
效果：再例如：
讓所有偶數段落和標題，跨越所有列
.columns {
padding: 5px;
border: 1px solid green;
width: 900px;
margin: 20px auto;
-webkit-column-count:3;
-moz-column-count:3;
-o-column-count:3;
-ms-column-count:3;
column-count:3;
-webkit-column-gap: 2em;
-moz-column-gap: 2em;
-o-column-gap: 2em;
-ms-column-gap: 2em;
column-gap: 2em;
-webkit-column-rule: 3px gray solid;
-moz-column-rule: 3px gray solid;
-o-column-rule: 3px gray solid;
-ms-column-rule: 3px gray solid;
column-rule: 3px gray solid;
p:nth-child(2n){
-webkit-column-span:all;
-moz-column-span:all;
-o-column-span:all;
-ms-column-span:all;
column-span:all;
效果：
CSS多列布局
多列布局適合純文字版式設計，如報紙內和雜誌類網頁布局，不適合做網頁結構布局。靈活使用多列布局特性，可以實現在多列中顯示文字和，從而節省大量的網頁空間。如果網頁上的文字很長，多列布局特性就能夠發揮它的用武之地。相容性參考 columns是多列布局特性的基本屬性，類似邊框特性中的border屬性，該屬性...
CSS多列布局
效果 我的爸爸剛剛30出頭，他的面容，要比他的年齡，成熟穩重的多，但是，他可沒有蒼老憔悴哦！爸爸的身高有180公分，體重75公斤，是個標準的型男身材。如果，我說我爸爸是個大帥哥，可一點也沒有撒謊呢！在我們小區裡，就組建了乙個籃球隊，爸爸，可是他那隊裡的佼佼者呢！每當，我們小區和其他小區，有籃球比賽的...
CSS多列布局
個人部落格 需要注意的是 本篇文章的布局，都未對父元素進行清除浮動的操作，所以在有一些使用了float的布局中，需要在parent容器清除浮動，才能在實際情況下使用。清除浮動的方式在這裡不做討論 這部分的html結構如下 left right right 大家先來看看直接在左側新增浮動是怎麼樣的吧 ...