第一篇介紹了聖杯布局，由此衍生了另一個效果相同、結構稍有不同的布局結構——雙飛翼布局。

因為兩種布局結構非常相似(略有不同)，為了不弄混淆，便於區分，沒有將它們寫在一篇。更加便於理解，思路更加清晰。

布局思路：

前面所說，聖杯布局是在一個大div中分別有三個浮動子元素Main、Left、Right(三個元素為兄弟元素)。而雙飛翼布局略有不同，Div、Left、Right三個浮動元素為兄弟元素，其中Main是Div裏的子元素。

最終效果也是兩邊定寬，中間寬度自適應並且中間主體部分優先渲染。

1.基本結構（高度相同，左右欄寬度200px）

代碼如下：

還是將Main放在前面，優先渲染。

2.給三個兄弟元素設置浮動效果

代碼如下：

效果如下：

此時忽略Main。div、Left、Right分別浮動，由於div的寬度為100%，所以Left、Right被擠到下一行。

3.設置Main

代碼如下：

效果如下：

Main設置一個左右margin，分別是Left和Right的寬度。中間主體部分自適應寬度(此時Main的寬度無需設置，繼承父元素的寬度)。

4.利用margin-left負值達到最終效果

代碼如下：

效果如下：

註意這裏的margin-left:-100%是距離上一個兄弟元素(即#div)的margin值，也就是將Left向左移動整個#div的長度

完整代碼：

總結

雙飛翼布局比聖杯布局少了一個relative定位，css結構更加簡單。但是聖杯的html布局可能更加地一步了然。

都是左右定寬，中間寬度自適應的布局結構。中間主體部分優先渲染。都用到了margin-left負值進行定位。

兩個都是很好的方法，都應該掌握。等到使用的時候，結合具體問題選擇最優方案即可。

解析雙飛翼布局