css中的那些佈局

由於最近心血來潮，就總結了一下css中的幾種常見的多列布局。

兩列自適應佈局

兩列自適應佈局算是css佈局裏面最基礎的一種佈局了，很多網站在使用。
這種佈局一般是左側固定，右邊自適應，固然也有反過來的，道理同樣，這裏有好幾種方法。

(張鑫旭老師的博客是左邊流式佈局，右邊固定寬度）

• 左浮動+margin

---

由於浮動會致使元素脫離文檔流，因此下面的元素會佔據浮動元素原來的位置。
 這個時候只要對右邊元素設置margin-left:左邊div寬度 就能夠實現自適應佈局。

代碼:左浮動實現兩列布局

• 絕對定位實現兩列布局

---

這個原理相似浮動，由於絕對定位會脫離文檔流，只須要設置右div的margin-left就能實現佈局。

代碼:絕對定位實現兩列布局

• flex實現兩列布局

---

flex佈局一直挺好用，無奈兼容性捉急，ie10+才支持。  
 
 注意，設爲Flex佈局之後，子元素的float、clear和vertical-align屬性將失效。  
 
 flex佈局默認項目是主軸爲水平方向，最主要的是flex屬性。flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。  
 
 
 大概就是給左邊的div一個固定值，而後給右邊設置flex:auto;來實現兩列布局。  
 
 
 這裏很少對flex佈局介紹，有興趣的能夠看一下

阮一峯老師的這篇博客:flex佈局

這裏是代碼連接:flex佈局實現兩列布局

• calc實現兩列布局

---

這是css3裏面的新屬性，兼容性還能夠，在ie9+、FF4.0+、Chrome19+、Safari6+都獲得了支持。  
 
 經過calc可使用百分比、em、px和rem單位值計算出其寬度或者高度，這樣就不用考慮div值究竟是多少。因此能夠對右邊div設置width:calc(100%-100px);來實現自適應佈局。

代碼連接:calc實現兩列布局

• 浮動+margin負值來實現

---

這是以前寫ife任務的時候在一篇博客上看到的。
 
 實現方法是給右邊的div外面再套上一個父div，而後讓父div的寬度設爲100%。
 對父div和左邊的div都設置左浮動，再讓左div的margin-left:-100%,右div設置margin-left:左div的寬度。
 這樣就實現了自適應佈局，固然左右div的先後順序要反過來。

具體看代碼:margin負值實現自適應

三列自適應佈局

除了常見的兩列布局，咱們也常常可以見到三列布局，左右固定，中間自適應。

（這裏只是拿這張圖舉個例子，w3school官網是三列固定佈局）

• 浮動實現三列布局

---

這個相似兩列布局的浮動，對左右div分別設置左右浮動，中間div設置margin-left和margin-right來實現，固然在html中的順序應該是左右中。

代碼連接：浮動實現三列布局

• margin負值實現三列布局

---

原理同margin負值實現兩列布局，很少說了。

直接上代碼:margin負值實現三列布局

• flex實現三列布局

---

和flex兩列布局一個原理，對兩邊設置flex:0 0 100px,中間設置flex:auto。

代碼代碼：flex實現三列布局