CSS布局中聖杯布局與雙飛翼布局的實現思路差異在哪裡？

01-14

聖杯布局：
& && & &main& &sub& &extra& & && &
.main { float: left; width: 100%; background:#39c; height:300px; } .sub { float: left; width: 190px; margin-left: -100%; background:#f60; height:300px; position:relative; left:-190px; } .extra { float: left; width: 230px; margin-left: -230px; background:#666; height:300px; position:relative; right:-230px; } #bd { padding: 0 230px 0 190px; }

=================questions==================
1，為什麼叫做聖杯布局？
2，聖杯布局和玉伯提的雙飛翼布局區別：

看似：聖杯布局中多了 position：relative;？
貌似去掉就是雙飛翼？
求一個分析

聖杯布局的來歷是2006年發在a list part上的這篇文章：

In Search of the Holy Grail · An A List Apart Article

聖杯是西方表達「渴求之物"的意思，不是一種對頁面的形象表達。

雙飛翼據考源自淘寶UED，應該是一種頁面的形象的表達。

聖杯布局和雙飛翼布局解決的問題是一樣的，就是兩邊頂寬，中間自適應的三欄布局，中間欄要在放在文檔流前面以優先渲染。

聖杯布局和雙飛翼布局解決問題的方案在前一半是相同的，也就是三欄全部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"就是雙飛翼布局「。

In Search of the Holy Grail · An A List Apart Article

雙飛翼布局介紹-始於淘寶UED_慕課猿問

第一篇文章是講聖杯布局的來歷，第二篇文章是講雙飛翼布局是如何在聖杯布局的基礎上誕生的以及對兩者的對比和分析。

聖杯布局和雙飛翼布局都是為了實現兩邊子面板寬度一定，中間主面板自適應。兩者的差異並非題主所說的去掉相對定位就完全相同。

聖杯布局的構造過程是：

DOM文檔

& && && && &

三者都設置向左浮動。
設置main寬度為100%。
設置負邊距，sub設置負左邊距為100%，extra設置負左邊距為負的自身寬度。
設置bd的padding值給左右兩個子面板留出空間。
設置兩個子面板為相對定位，sub的left值為負的sub寬度，extra的right值為負的extra寬度。

但是聖杯布局有個問題，當面板的main部分比兩邊的子面板寬度小的時候，布局就會亂掉。因此也就有了雙飛翼布局來克服這個問題。如果不增加任何標籤，想實現更完美的布局非常困難，因此雙飛翼布局在主面板上選擇了添加一個標籤。

雙飛翼布局的構造過程是：

DOM文檔

& &#main& & && &&

三者都設置向左浮動。
設置main寬度為100%。
設置負邊距，sub設置負左邊距為100%，extra設置負左邊距為負的自身寬度。
設置main-content的margin值給左右兩個子面板留出空間。

對比兩者可以發現，雙飛翼布局與聖杯布局的主要差別在於：

雙飛翼布局給主面板添加了一個父標籤用來通過margin給子面板騰出空間。
聖杯採用的是padding，而雙飛翼採用的margin，解決了聖杯布局的問題。
雙飛翼布局不用設置相對布局，以及對應的left和right值。

相比之下，個人認為雙飛翼布局更加簡潔，響應式更好。

參考雙飛翼布局介紹-始於淘寶UED_慕課猿問

用flex布局會死嗎？

什麼年代了，還要用 2006 的東西。逃）

一個是「這是你的該呆的地方？滾犢子」

一個是「好好好，你們牛，我給你們讓位置」

第一個聖杯第二個雙飛翼

我是這麼理解的！

如果main要給左邊的left模塊和右邊的right模塊都讓出一定寬度來的話，

只有padding：0 100px 0 200px;或者margin：0 100px 0 200px;這兩種方式！

這兩條路線，

如果走margin路線，一路走下去，你會發現最後你寫出的代碼就是雙飛翼

如果走padding路線，那就是聖杯！

1.走margin的路線的話！相信一般都是container設置100%。或者寬度有具體數值（如1190px）然後margin 0 auto居中，然後讓內部元素來加margin，來內部空出一切空白！

這裡給給main設置margin：0 100px 0 200px;這樣左右就留了一些位置給另外兩個模塊，讓另外兩個模塊上來，main要設置float：left，為了自適應，肯定還要設置width100%；但是這個100%跟前面的margin：0 100px 0 200px不對付了！

如果container是1000，因為main同時具備margin和width100%，結局就是main寬度也是1000px，但是main左邊空了200px，右邊直接衝出去了！

所以，這就是為什麼雙飛翼的main多了一層div嵌套，把margin拿到內層上去，把100%和margin分開，

然後另外兩個模塊分別負邊距拉到指定位置就ok了！

當然，如果再確定了是要加一層div嵌套的話，

又多出一個選項，內層也是可以用padding：0 100px 0 200px;代替margin：0 100px 0 200px的！這算一個岔路！

&&&&

這個思路完事！

2.如果走padding路線的話，那就是聖杯！

container自身加padding之後，再看看其子元素這三個模塊！

因為3個模塊和container包含關係嘛，padding是父元素的地盤

所以在使用了負邊距把left模塊和right給拉上來以後！你會發現：

left模塊的負邊距-100%是以container的寬度砍掉兩邊的padding值後的寬度，

同樣right模塊的負邊距起始位置也是container砍掉右邊的padding的位置起算！

結果就是左右的空白依然是空白，左右兩個模塊緊貼著空白的內邊放著！

這咋辦，這就是為什麼relative要登場了！

分別給left模塊和right模塊添加relative屬性，然後分別添加left或者right屬性，

我們經常用到absolute+leftright布局，其實relative+leftright也可以，這樣模塊是可以在不脫離文檔流的情況下隨意偏移位置的！

於是把left模塊和right模塊向外拉，拉出自身的寬度~這樣就蓋到父元素的padding空白上去！

這就是聖杯了！

這是第二個思路！

我貼一個我自己寫的雙飛翼代碼，最後頁面展示有點問題，求指導

首先是顯示界面，中間欄的文字有一部分被左欄遮住，說明中間沒有壓縮

&this is paragraph 4 dfjkdshjkfh kjjdsfkjdskfsdkfkdshfkjdshfkj &

&this is paragraph 5&

&this is paragraph 6&

.main2{

background-color:grey;

float:left;

width:100%;

min-height:100px;

}

#main2Inner{

margin:0 220px 0 200px;

}

.left2{

float:left;

width:200px;

margin-left:-100%;

background-color:red;

min-height:100px;

}

.right2{

float:left;

width:220px;

margin-left:-220px;

background-color:green;

min-height:100px;

}

HTML

&Sub&

&Right&

&Main&

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

CSS：

div{

height: 100px;

}

#sub{

float: left;

width:100px;

background:#fd467d;

}

#right{

width:100px;

float: right;

background:#ee467d;

}

#main{

margin:0 100px;

background:#ffff00;

overflow: hidden;

}

－－－－－－－－－－－－－－－－－－－－－－－－－

原諒菜鳥一枚來求指教，自己查手冊查資料，這樣也完成了兩邊固定中間自適應的三欄布局，才知道有典型的兩種布局，然而感覺自己寫的跟上面大神們提到的兩種布局都不同。跪求大神指導。

下午把這兩個布局研究了一下，簡單來說

聖杯布局在實現main處用的是：.main加padding/.left.right加相對定位

雙飛翼是直接在main中加一層容器,設置margin就可以，樓上大神說的用padding也可以，不要設border

如果在聖杯中單純去掉position：relative的話，三個div擠在一起兩邊會留很大空白，你可以自己試一試。