兩列自適應佈局

隨便拿一個搜索引擎搜索一下「兩列自適應佈局」，都能獲得不少種實現方法，這篇文章的重點是這些方法的底層邏輯是什麼，他們是怎麼得來的。

分析：

須要知足三個要求：

①兩個盒子在同一行

②右邊的盒子須要佔滿剩下的空間

③兩個盒子不能重疊

這三個條件又分別有不少種實現方法（不考慮絕對定位）：

組合起來，會有不少種實現方式。

方法：

<div class="left"></div> <div class="main"></div>

一、float+block+margin：

.left { float: left; width: 100px; } .main { margin-left: 110px; width: 100%; }

缺點：若是想修改.left的寬度，還須要修改.main 的margin-left。

 

二、float+BFC：

.left { float: left; margin-right: 10px; width: 100px; } .main { overflow: hidden; //或overflow：auto }

優勢：能夠設置浮動的margin來控制間距，想要修改寬度時只修改寬度就好了。

 

增長條件：

若是須要讓重要的內容先渲染，即HTML結構應該是：

<div class="main"></div> <div class="left"></div>

若是是這樣的話，第一個盒子的寬度必須是100%，由於若是想要同行，他只能是float或是display:inline-block（不考慮絕對定位），這兩種狀態都須要設置width:100%來作到自適應。

• 浮動：

若是.main設置float的話，根據浮動流的原理，要讓.main的右邊出現和.left寬度相同或更多的空隙，才能讓.left到上面一行來，若是要讓.left貼住.main的左邊線，就要製造出和.main自身相等的空隙，因此須要給.left設置margin-left:-100%;

這時候.left就疊到了.main的上面。若是給.main設置margin-left: 100px，.left仍是會疊在.main上面，由於這時候.main的寬度變小了，.left的負邊距也變小了，因此無論給.main的margin-left值設置成多大，.left始終會覆蓋住它。

因此，若是想用float+margin讓他們不重疊的話，只能再增長一個盒子，爲其設置margin。即：

<div class="main"> <div class="main-content"></div> </div> <div class="left"></div>

.left { margin-left:-100%; height: 400px; display: inline-block; /*或者 float:left;*/ width: 100px; } .main { float: left; width: 100%; } .main-content { margin-left: 110px; }

除此以外還剩下兩條路，一個是float+BFC，一個是position:relative。

先看float+BFC，.main是float，可是他已經徹底被後面的浮動流蓋住了，因此他沒法充當那個"float"，顯然他也沒法作那個BFC，因此這條路是走不通的。

而後看position:relative。讓.main右移空出.left的位置，而後用relative將其拉出來，即：

.left { margin-left:-100%; position: relative; left: -110px; display: inline-block; /*或者 float:left*/ width: 100px; } .main { margin-left: 110px; float: left; width: 100%; }

 

• display:inline-block;

若是讓.main display:inline-block的話，必須讓當前行盒留出大於.left寬度的空隙，而且讓.left浮動，他們才能夠到一行上去。

想讓當前行盒縮短的話，能夠給.main設置左邊或是右邊的負邊距，這會有一個反作用，就是會讓.main向左或向右移動，因此，只能給他設置左邊的負邊距。

到一行上面以後.main會蓋住.left，這是由於在同一個堆疊上下文中，inline-block會在float的上面，因此還須要給.left設置position:relative讓他顯示出來。

由於.main已經設置了負的margin-left，因此沒法給.left讓出空間，position:relative這條路也是無法走了。float+BFC顯然也是行不通。

因此只有一種方法：

<div class="main"> <div class="main-content"></div> </div> <div class="left">/div>

.left { float: left; position: relative; width: 100px; } .main { display: inline-block; margin-left: -100px; width: 100%; } .main-content { margin-left: 110px; }

 

總結：

從問題出發，結合基礎的知識點，能夠得出如下5種實現方式：

 不要求重要內容先渲染的話，可使用：

1.float+margin

2.float+BFC

要求重要內容先渲染的話，能夠：

1.float+relative

2.float+新盒子

3.inline-block+新盒子

除此以外，還有CSS3的flexbox，他的缺點是不兼容低級瀏覽器而且會出現一些bug。

每一個方法都有各自的優勢和缺點，沒有絕對的好與壞，要使用哪一種方式仍是要結合具體的需求來決定。

 轉自轉自http://www.cnblogs.com/LiveWithIt/p/5965605.html