雙飛翼佈局淺析

【原】

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

由於兩種佈局結構很是類似(略有不一樣)，爲了避免弄混淆，便於區分，沒有將它們寫在一篇。更加便於理解，思路更加清晰。

 

佈局思路：

前面所說，聖盃佈局是在一個大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的長度，因此最終Left移動到了上一行(移動先後的Left是在一列的)。

 

完整代碼：

 

總結

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

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

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