三欄佈局中間自適應總結

三欄佈局，中間自適應這個經典的問題，以前也看了不少。今天準備在本身的博客裏面總結一下，加深本身的理解。

方式一：左邊左浮動，右邊右浮動，中間自適應

<style>
    .left{
       float: left;
        height: 200px;
        width: 200px;
        background-color: aquamarine;
        border: solid 1px black;
    }
    .right{

      float: right;
        height: 200px;
        width: 300px;
        background-color: darkgreen;
        border: solid 1px black;
    }
    .middle{
        height: 200px;
        width: auto;
        background-color: cornflowerblue;
        border: solid 1px black;
        margin: 0 320px 0 220px; //左右間距設置成左右div的寬帶+20 撐開了一段空隙



    }
</style>

<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>

注意點：
1.<div class="middle"></div>必定要放在最後*，由於若是middle放在第一個，會佔據文檔流位置，left和right的浮動只能從第二行開始了。
2.當瀏覽器窗口很小的時候，最右邊元素會被壓迫到下一行。

下面附上效果圖：

方式二：絕對定位法

<style>
    .left{
        position: absolute;
        height: 200px;
        width: 200px;
        top: 0;
        left: 0;
        background-color: aquamarine;
        border: solid 1px black;
    }
    .right{
        position: absolute;
        height: 200px;
        width: 300px;
        top: 0;
        right: 0;
        background-color: darkgreen;
        border: solid 1px black;
    }
    .middle{
        height: 200px;
        width: auto;
        background-color: cornflowerblue;
        border: solid 1px black;
        margin: 0 320px 0 220px;



    }
</style>
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>

注意點：
1.由於是絕對定位，因此middle、left和right的位置前後順序能夠隨便放。
2.須要對中間或者兩邊的top屬性進行微調，不然中間與兩邊高度不齊，效果以下所示

方式三：浮動+margin負值法（又被稱爲雙飛翼佈局法）

<style>
    .left{
        /*position: absolute;*/
        float: left;
        height: 200px;
        width: 200px;
        background-color: aquamarine;
        /*border: solid 1px black;*/
        margin-left: -100%;
    }
    .right{
        /*position: absolute;*/
        float: left;
        height: 200px;
        width: 300px;
        background-color: darkgreen;
        /*border: solid 1px black;*/
        margin-left: -300px;
    }
    .middle{
        float: left;
        width: 100%;
        background-color: cornflowerblue;
        /*border: solid 1px black;*/

    }
    .main{
        height: 200px;
        margin: 0 320px 0 220px;
        background-color: brown;
    }
</style>
<div class="middle">
<div class="main">中間</div>
</div>
<div class="left">左邊</div>
<div class="right">右邊</div>

注意點：
1.middke要放在最前面，這樣left和right才能覆蓋上去。
2.left的margin-left設置成-100%，浮動到第一行最左側，right的margin-left設置成負的自身寬度，正好浮動到第一行最右側。
3.<div>的border寬度會影響left盒子和right盒子向第一行浮動的位置，由於會把border的寬度算進去，好比本例子中，若是border沒有被註釋掉，right盒子的margin-left設置成-300是沒法浮動到第一行的，要-304才能浮動到第一行，加上了border的寬度。
4.在middle裏面嵌套一個main盒子，是爲了經過main盒子設置margin-left和margin-right。若是直接在浮動的middle上設置，是會有問題的，總體會向右偏移margin-left距離。

效果圖以下：

方法四：css3 彈性盒子flex

<style>
    .contain{
        display: flex;
    }
    .left{
        height: 200px;
        width: 200px;
        background-color: aquamarine;
    }
    .right{
        height: 200px;
        width: 300px;
        background-color: darkgreen;
    }
    .middle{
        margin-left: 20px;
        margin-right: 20px;
        width: 100%;
        height: 200px;
        background-color: cornflowerblue;
    }
</style>

<div class="contain">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>

注意點：
1.代碼十分簡潔，只要在最外層加一個大盒子包裹，並設置display等於flex就能夠了，間距能夠用margin進行調整。
2.middle盒子必定要放在中間，按順序來。
3.當瀏覽器窗口縮到很小時，也不會把最右邊的right盒子擠到下一行。

效果圖以下：

總結：這就是經常使用的幾種佈局方式，還有一種聖盃佈局法原理跟雙飛翼類似，可是更復雜一些，相比而言仍是推薦雙飛翼佈局法。彈性盒子的佈局法應該是最簡潔實用的，優勢比較突出。