CSS多列布局

**個人部落格

需要注意的是：本篇文章的布局，都未對父元素進行清除浮動的操作，所以在有一些使用了float的布局中，需要在parent容器清除浮動，才能在實際情況下使用。（清除浮動的方式在這裡不做討論）

left

right
right

不要覺得詫異！因為float最開始的出現就是為了實現這個文字環繞效果的，只不過被攻城師們玩壞了，用到了布局上；但這肯定不是我們想要的，來看看我們想要的是怎麼樣的吧！

這樣才對嘛！是我們想要的！下面就來看看css的實現吧：

.left

.right

怎麼解決呢？

優點：相容性好，相容所有瀏覽器；缺點：結構增加，樣式複雜。

布局改變如下：

left

right
right

.left

.right-fix
.right

.left

.right

優點：加速table渲染，實現布局優先；缺點：**量大，複雜

.parent

.left,.right
.left

.parent

.left
.right

其實只是在上面的布局上，中間再加入乙個center。

html結構如下：

left

center
right
right

.left,.center

.right

html結構同一列定寬一列自適應。

其實就是對一列定寬,一列自適應的後三個進行一下改造

優點：相容性好，使用最多，結構簡單；（其實和上面的改變就是左側使用內容去撐開高度，因為原來的實現已經達到了這個效果）

.left

.right
.left p/*使用內容去撐開寬度*/

對css進行如下更改：

.parent

.left,.right
.left
.left p/*使用內容去撐開寬度*/

.parent

.left
.right
.left p/*使用內容去撐開寬度*/

以float+overflow為例，只需要把center設定和left一樣就可以了。

.left,.center

html結構如下：

其實我們只需要給父容器增加乙個g，也就是乙個負的margin就可以實現了，下面就來看看吧：

優點：設定簡單；缺點：支援ie8+，在布局變更時，需改變css樣式（width：xx%）結構和樣式耦合在了一起

p/*對div中的p標籤設定才有間隔效果，所以在設定內容時，也是在p中設定*/

.parent
.column

效果不是就達到了呢？其實還不盡然，可以看到最左邊還有乙個寬度，我們不想要怎麼辦？

這並不是乙個bug，而是我們的設定導致的，現在來刪除上面的padding-left: 20px;吧，可以看到成了這樣子：

如果你需要有填充的話，自行設定吧

html部分在上面的基礎上，在最外層增加包裹住

.parent-fix

.parent
.column

.parent

.column
.column+.column

這裡使用的是margin，因為flex自動分配剩餘空間

大家先來看看想要的效果：

是不是很熟悉？html和第一部分一樣：

但是兩側高度等同於高度最高的部分。

left

right
right

.parent

.left,.right
.left
.right

CSS多列布局

多列布局適合純文字版式設計，如報紙內和雜誌類網頁布局，不適合做網頁結構布局。靈活使用多列布局特性，可以實現在多列中顯示文字和，從而節省大量的網頁空間。如果網頁上的文字很長，多列布局特性就能夠發揮它的用武之地。相容性參考 columns是多列布局特性的基本屬性，類似邊框特性中的border屬性，該屬性...

CSS多列布局

效果 我的爸爸剛剛30出頭，他的面容，要比他的年齡，成熟穩重的多，但是，他可沒有蒼老憔悴哦！爸爸的身高有180公分，體重75公斤，是個標準的型男身材。如果，我說我爸爸是個大帥哥，可一點也沒有撒謊呢！在我們小區裡，就組建了乙個籃球隊，爸爸，可是他那隊裡的佼佼者呢！每當，我們小區和其他小區，有籃球比賽的...

CSS多列布局

css新增了多列布局特性，可以讓瀏覽器確定何時結束一列和開始下一列，無需任何額外的標記。簡單來說，就是css3多列布局可以自動將內容按指定的列數排列，這種特性實現的布局效果和報紙 雜誌類排版非常相似。本文將詳細介紹css多列布局的基本屬性和用法 注意 ie10 和chrome瀏覽器支援標準寫法，而f...