特點：給中心盒子裡邊再套乙個盒子用來放置內容，這個盒子設定左右兩側的外邊距，目的是把內容放到中心盒子身上展示
雙飛翼布局，始於**ued。如果把三欄布局比作乙隻鳥，可以把main看做是鳥的身體，left 和 right 則是鳥的翅膀。這個布局的實現思路是，先把最重要的身體部分放好，然後再將翅膀移動到適當的地方。雙飛翼也是三列自適應布局（中間100%，兩側固定寬度）。
步驟：
1.先將三個盒子浮動併排（先寫中間盒子，再寫兩側 保證左右兩側盒子同時併排到右側）
2.左右兩側盒子用負左外邊距放到中間盒子的兩側（左側盒子 margin-left: -100%（中間盒子寬度）; 右側盒子 margin-left: -300px（自身寬度）;）
3.設定inner盒子的左右外邊距 margin: 0px 300px; ，數值分別是左右兩側盒子的寬度，內容就會展示出來
center
left
right
第二步：
第三步：
三欄布局之聖杯布局 雙飛翼布局
聖杯布局和雙飛翼布局是經典的三欄布局。實現了左右兩側固定中間自適應的布局。聖杯布局主要是利用float 相對定位 容器的padding來完成布局。doctype html content type content text html charset utf 8 test page title htm...
兩欄布局和雙飛翼布局
介紹一下一般在後台管理系統時常常會用到的布局。首先是自適應兩欄布局，一側保持一定的寬度可以作為導航，另一側為主體內容，可以根據瀏覽視窗的大小而改變自身的大小。自適應兩欄布局 html css樣式 left main 接下來是雙飛翼布局，也可以叫做聖杯布局 是指瀏覽器兩側各有乙個固定寬度的盒子，而中間...
雙飛翼布局
第一可以實現三列布局左右固定寬度，中間寬度自適應，第二個，通常三列布局都是按照左 sub 中 main 右 extra 順序來寫的，這樣頁面也會根據這個dom結構來順序載入，而如果用雙飛翼布局，可以使三列布局中mian先載入，sub和extra後載入。html class main div clas...