兩招搞定三欄布局聖杯布局雙飛翼布局

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

首先，我們先定義html結構：

中間的左邊的右邊的

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

.middle, .left, .right

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

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

.left .right

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

.left .right .container

ok！大功告成，聖杯布局已經完成啦~

雙飛翼的布局基本和聖杯布局類似，它的html結構為：

中間的左邊的右邊的

前面的布局和聖杯完全一致，只是從【*】開始的這一步略微有些差異。

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

.inner_middle

另外，整個布局的左右padding留白也有些差異，直接設定父盒子的padding為左右留白的寬度就可以了。

.container

這裡還有第二種實現方式，html結構沿用聖杯布局的結構，通過設定左右padding來避免中間盒子內容的覆蓋。同時為了避免布局混亂，還有設定box-sizing: border-box，表示width包括border和padding，這樣可以保證即使設定右左右padding，它的總寬度也是不變的。

.middle

兩招搞定三欄布局 聖杯布局 雙飛翼布局