兩欄自適應佈局延展到多欄自適應佈局

一、網上不少文章了，爲何還要講？

 　　說到兩欄自適應佈局，估計不少人看到這樣相似的文章，我常常也看過，可是那些實現方式跟我所常用的兩種方法不同，常用的意思是，我一遇到這種佈局，立馬想到的就是使用這種。就像咱們拿東西，咱們立馬就會想到用手拿，固然還有不少方式能夠拿到，好比用嘴刁。 因此，當咱們看到多種實現方式的時候，必定要學會比較，而後選擇其中一兩種做爲經常使用佈局記到深處，就是想都不用想就用的。 

二、先看效果，本身先看看，若是懂了，就不要看其餘解釋文字了， 節約時間

See the Pen Layouts by wenjie (@wenjie) on CodePen.

點擊右上角那個 CodePen Logo能夠在新頁面看，大點看對眼睛好

3 、解釋一下　

　　overflow方式主要原理： 固定寬度（block設置了寬度，或者inline-block元素本身的寬度）那一塊浮動起來，放在最前面；自適應那一塊必定要放在最後，寬度不能設置即寬度要爲auto，設置overflow爲hidden或者scroll等（目的造成BFC。overflow爲visible不能造成BFC，其餘均可以，本身能夠搜索文章看看）。

       table-cel l方式主要原理：原理跟overflow相似，惟一不一樣的是它設置了一個很大很大的寬度，因爲table-cell有本身的最大寬度，因此咱們設置很大是爲了 到達它的最大寬度，也就是瀏覽器的邊緣吧。

      margin負值在網上寫得風生水起，但我的不是很喜歡使用，我認爲它的惟一優勢就是能把自適應內容的標籤放在了最前面 ，使SEO更友好，由於SEO一進來就獲取到了最重要的內容。 但margin負值會增長更多的難度，設置甚至排查問題可能會花更多時間。因此margin負值我就是學一學的姿態，用不用取決於心情。

四、 多欄佈局

     延展到多欄佈局，是同樣的，其實沒啥可說的，就是把全部固定寬度的欄目放在最前面浮動起來，把自適應的部分放在最後便可。

五、幾點地方要注意

      由於用了浮動，因此記得父容器清除浮動，好比我直接用overflow:auto清除浮動、也能夠用咱們常寫的 class=clearfix。

      若是是英文網站或者文章裏面有英文 還要考慮長英文單詞的時候，這個時候若是單詞在邊緣就會被截斷，這個時候，自適應的容器就要加上 word-wrap: break-word; 進行處理。

六、其餘幾種方式

      還有其餘不少不少種方式，你們隨便一搜就能搜到，好比CSS3的 calc(100% - x)這個其實我在移動端也常用，它的缺點就是舊版瀏覽器的兼容問題。

七、工做繁忙，沒啥時間，文章粗糙

     文章中可能有錯別字形成難以理解的，也請指出，若不影響你們吸取主要內容就算了吧，O(∩_∩)O哈哈~，如有知識性錯誤請不要吝嗇指正，提早感謝。