兩招搞定三欄佈局——聖盃佈局、雙飛翼佈局

如何實現以下的這種中間自適應寬度，左右兩欄固定寬度佈局？

這是一道經典的面試題，經常使用的方法是：聖盃佈局、雙飛翼佈局。相信看完這篇文章，你就能很清楚的知道什麼是聖盃和雙飛翼了。

聖盃佈局

首先，咱們先定義HTML結構：

<div class='container'>
    <div class="middle">中間的</div>
    <div class="left">左邊的</div>
    <div class="right">右邊的</div>
</div>

再來開始咱們的佈局，首先給這三個div都給一個float: left，讓它們均左浮動。

.middle, .left, .right{
    float: left;
}

接下來是最重要的兩個步驟，設置左盒子的margin-left: -100%，把左盒子拉上來，調整左盒子的浮動位置到中間盒子的左側。

再設置右盒子的margin-left: -右盒子寬度px，把右盒子拉上來，調整右盒子的浮動位置到中間盒子的右側。

.left{
    background: pink;
    width: 300px;
    height: 300px;
    margin-left: -100%;
    }
    
.right{
    background: pink;
    width: 300px;
    height: 300px;
    margin-left: -300px;  //300px爲右盒子的寬度
}

【*】此時的佈局基本出來了，可是中間盒子的左右兩側會被左右兩個盒子覆蓋掉，此時咱們要經過相對定位來避免覆蓋。給左右盒子position: relative，再分別設置它們的left和right,而且控制父元素的padding來爲左右兩邊留白。

.left{
    position: relative;
    left: -300px;
}

.right{
    position: relative;
    right: -300px;
}

.container{
    border: 1px solid black;
    height: 300px;
    padding: 0 400px;
}

ok！大功告成，聖盃佈局已經完成啦~

雙飛翼佈局

雙飛翼的佈局基本和聖盃佈局相似，它的HTML結構爲：

<div class='container'>
    <div class="middle">
        <div class="inner_middle">中間的</div>
    </div>
    <div class="left">左邊的</div>
    <div class="right">右邊的</div>
</div>

前面的佈局和聖盃徹底一致，只是從【*】開始的這一步略微有些差別。

在雙飛翼中避免左右盒子被覆蓋，是經過設置inner_middle的左右margin來實現的。

.inner_middle{
    margin: 0 300px;
}

另外，整個佈局的左右padding留白也有些差別，直接設置父盒子的padding爲左右留白的寬度就能夠了。

.container{
    border: 1px solid black;
    height: 300px;
    padding: 0 100px;

}

---

這裏還有第二種實現方式，HTML結構沿用聖盃佈局的結構，經過設置左右padding來避免中間盒子內容的覆蓋。同時爲了不佈局混亂，還有設置box-sizing: border-box，表示width包括border和padding，這樣能夠保證即便設置右左右padding，它的總寬度也是不變的。

.middle{
    background: #ccc;
    width: 100%;
    height: 300px;
    padding: 0 300px;
    box-sizing: border-box;
}