聖杯布局和雙飛翼布局是需要掌握的重要布局方式。兩者的功能相同，都是為了實現乙個兩側寬度固定，中間寬度自適應的三欄布局（中間先載入渲染）
兩者的實現方法略有差異，不過都遵循了以下要點：
聖杯布局和雙飛翼布局解決問題的方案在前一半是相同的，也就是三欄全部float浮動，但左右兩欄加上負margin讓其跟中間欄div併排，以形成三欄布局。
不同在於解決」中間欄div內容不被遮擋「問題的思路不一樣：
簡單說起來就是」雙飛翼布局比聖杯布局多建立了乙個div，但不用相對布局了「。
下面以**來看兩者的實現方法：
header
middle
left
right
footer
float布局框架 ， 用margin為負值 ，position: relative定位。
優點：不需要新增 dom節點；
缺點：中間部分的寬小於左側部分時就會發生布局混亂，即某一列內容若過多，文字會溢位（middle
header
middle
left
right
footer
利用padding和margin實現等高度變化，inside中 margin: 0 200px;給左右設定margin，將inside 擠到中間顯示。
聖杯布局 雙飛翼布局
前言 上班划水偷空了解了一下聖杯布局和雙飛翼布局，一聽這兩個名字，覺得不明覺厲，其實就是三欄布局，左右兩邊的盒子寬度固定，中間的盒子寬度自適應。以下內容均是總結網際網路上別人的文章。覺得有意思就記錄一下。聖杯布局，方法一 container middle left right style head ...
聖杯布局和雙飛翼布局
雙飛翼布局和聖杯布局其實是我們經常會在 中看到的經典的三欄式布局，即中間是主要內容main content，然後是左邊側欄，一般是 的分類資訊，右邊欄就是一些附屬功能，最典型的例子就是 和京東。main main son left right 上面就是雙飛翼布局的html 結構非常清晰，分為main...
聖杯布局和雙飛翼布局
一 聖杯布局 重點 content的padding，left的margin left和left值，right的margin left和right值 lang en charset utf 8 聖杯布局title header content content main content left,con...