聖杯布局其實和雙飛翼布局是一回事。它們實現的都是三欄布局，兩邊的盒子寬度固定，中間盒子自適應，也就是我們常說的固比固布局。它們實現的效果是一樣的，差別在於其實現的思想。
1、 雙飛翼布局
html**段
css布局**段
雙飛翼布局，使用了浮動。#left元素的margin-left:-100%,指#main元素的寬度。這裡的寬度是content-width;
#right 元素的margin-left:-190px,為右欄元素的寬度。
執行結果如下：
2 聖杯布局
html**段
注意！沒有main-wrap元素
css布局**段
聖杯布局，使用了浮動和定位。#left元素的margin-left:-100%,指#main元素的寬度，這裡的寬度是content-width;。再使用relative屬性相對自己的原始位置定位，left:-190px.為左欄的寬度。#right 元素的margin-right:-190px,為右欄元素的寬度。
(經測試，#right 元素也可以設定位置為margin-left:-190px,right:-190px;)
執行結果如下：
總結：(1)寫結構的時候要注意，父元素的的三欄務必先寫中間盒子。因為中間盒子是要被優先渲染並且設定其自適應，也就是width:100%。
(2)相比聖杯布局，雙飛翼不必設定左右欄的position: relative，也不必設定左右left、
right
值，只需多新增乙個子元素包含。
聖杯布局 雙飛翼布局
前言 上班划水偷空了解了一下聖杯布局和雙飛翼布局，一聽這兩個名字，覺得不明覺厲，其實就是三欄布局，左右兩邊的盒子寬度固定，中間的盒子寬度自適應。以下內容均是總結網際網路上別人的文章。覺得有意思就記錄一下。聖杯布局，方法一 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...