作用：
聖杯布局和雙飛翼布局解決的問題是相同的，就是兩邊頂寬，中間自適應的三欄布局，中間欄要在放在文檔流前面以優先渲染。
區別：
聖杯布局：為了讓中間div內容不被遮擋，將中間div設置了左右padding-left和padding-right后，將左右兩個div用相對布局position: relative並分別配合right和left屬性，以便左右兩欄div移動后不遮擋中間div。
雙飛翼布局：為了讓中間div內容不被遮擋，直接在中間div內部創建子div用於放置內容，在該div里用margin-left和margin-right為左右兩欄div留出位置。
聖杯布局：
優點：不需要添加dom節點
缺點：聖杯布局的缺點：正常情況下是沒有問題的，但是特殊情況下就會暴露此方案的弊端，如果將瀏覽器無線放大時，「聖杯」將會「破碎」掉。如圖：當middle部分的寬小於left部分時就會發生布局混亂。（middle<left即會變形）
當middle的寬度為大於left寬度時：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>聖杯布局</title> 6 <style> 7 8 #bd{ 9 padding: 0 200px 0 180px; 10 height: 100px; 11 } 12 #middle{ 13 float: left; 14 width: 100%; 15 height: 500px; 16 background:blue; 17 18 } 19 #left{ 20 float:left; 21 width:180px; 22 height:500px; 23 margin-left:-100%; 24 background: #0c9; 25 position: relative; 26 left: -180px; 27 } 28 #right{ 29 float: left; 30 width: 200px; 31 height: 500px; 32 margin-left: -200px; 33 background: #0c9; 34 position: relative; 35 right: -200px; 36 } 37 38 </style> 39 </head> 40 <body> 41 42 <div id="bd"> 43 <div id="middle">middle</div> 44 <div id="left">left</div> 45 <div id="right">right</div> 46 47 48 </div> 49 50 </body> 51 </html>
其中：
左右欄通過添加負的margin放到正確的位置了，此段代碼是為了擺正中間欄的位置#bd{ padding: 0 200px 0 180px; height: 100px; }
中間欄的位置擺正之后，左欄的位置也相應右移，通過相對定位的left恢復到正確位置
#left{ position: relative; left: -180px; }
中間欄的位置擺正之后，右欄的位置也相應左移，通過相對定位的right恢復到正確位置#right{ position: relative; right: -200px; }
雙飛翼布局：
優點：不會像聖杯布局那樣變形
缺點是：多加了一層dom節點
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>雙飛翼布局</title> 6 <style> 7 8 #center{ 9 float:left; 10 width:100%;/*左欄上去到第一行*/ 11 height:100px; 12 background:blue; 13 } 14 #left{ 15 float:left; 16 width:180px; 17 height:100px; 18 margin-left:-100%; 19 background:#0c9; 20 } 21 #right{ 22 float:left; 23 width:200px; 24 height:100px; 25 margin-left:-200px; 26 background:#0c9; 27 } 28 29 /*給內部div添加margin，把內容放到中間欄，其實整個背景還是100%*/ 30 #inside{ 31 margin:0 200px 0 180px; 32 height:100px; 33 } 34 40 </style> 41 </head> 42 <body> 43 <div id="center"> 44 <div id="inside">middle</div> 45 </div> 46 <div id="left">left</div> 47 <div id="right">right</div> 48 </body> 49 </html>