聖杯布局和雙飛翼布局解決的問題是一樣的，就是兩邊頂寬，中間自適應的三欄布局，中間欄要在放在文件流前面以優先渲染。
聖杯布局和雙飛翼布局解決問題的方案在前一半是相同的，也就是三欄全部float浮動，但左右兩欄加上負margin讓其跟中間欄div併排，以形成三欄布局。
不同在於解決」中間欄div內容不被遮擋「問題的思路不一樣：
聖杯布局，為了中間div內容不被遮擋，將中間div設定了左右padding-left和padding-right後，將左右兩個div用相對布局position: relative並分別配合right和left屬性，以便左右兩欄div移動後不遮擋中間div。
雙飛翼布局，為了中間div內容不被遮擋，直接在中間div內部建立子div用於放置內容，在該子div裡用margin-left和margin-right為左右兩欄div留出位置。
多了1個div，少用大致4個css屬性（聖杯布局中間divpadding-left和padding-right這2個屬性，加上左右兩個div用相對布局position: relative及對應的right和left共4個屬性，一共6個；而雙飛翼布局子div裡用margin-left和margin-right共2個屬性，6-2=4），個人感覺比聖杯布局思路更直接和簡潔一點。
簡單說起來就是」雙飛翼布局比聖杯布局多建立了乙個div，但不用相對布局了「，而不是你題目中說的」去掉relative"就是雙飛翼布局「。
最終介面是一樣的：
對比圖：
下面直接上**：
聖杯布局：
<雙飛翼布局：body
>
<
div
id="hd"
>header
div>
<
div
id="bd"
>
<
div
id="middle"
>middle
div>
<
div
id="left"
>left
div>
<
div
id="right"
>right
div>
div>
<
div
id="footer"
>footer
div>
body
>
<
style
>
#hd#bd
#middle
#left
#right
#footer
style
>
<body
>
<
div
id="hd"
>header
div>
<
div
id="middle"
>
<
div
id="inside"
>middle
div>
div>
<
div
id="left"
>left
div>
<
div
id="right"
>right
div>
<
div
id="footer"
>footer
div>
body
>
<
style
>
#hd#middle
#left
#right
/*給內部div新增margin，把內容放到中間欄，其實整個背景還是100%
*/#inside
#footer
style
>
<body
>
<
style
type
="text/css"
>
body
.boxa
.boxb
.boxc
.box
/*abc
*//*
.boxa
.boxb
*//*
cba*/
.container
.boxb
.boxc
.boxa
/*bac
*//*
.boxc
.container
*/style
>
<
p>現有並列的三列布局結構，從左至右依次為 a, b, c, 寬度分別為180px, 600px, 180px。要求在不改變 html 結構的情況下用css實現：abc，cba，bac 三種布局及在cba排列下使b寬度自適應（三列總寬度100%），不能使用針對瀏覽器的css hack.
p>
<
div
class
="container"
>
<
div
class
="box boxb"
>b
div>
<
div
class
="box boxc"
>c
div>
<
div
class
="box boxa"
>a
div>
div>
body
>
聖杯布局和雙飛翼布局
雙飛翼布局和聖杯布局其實是我們經常會在 中看到的經典的三欄式布局，即中間是主要內容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...
聖杯布局和雙飛翼布局
聖杯布局 title style type text css body 2.設定container的樣式 container 3.設定middle left right的公用樣式 middle,left,right 4.設定middle的樣式 middle 5.設定left的樣式 left 6.設定...