作者：知乎用戶

鏈接? ?來源：知乎

圣杯布局的來歷是2006年發(fā)在a list part上的這篇文章：

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

圣杯是西方表達(dá)“渴求之物"的意思，不是一種對(duì)頁面的形象表達(dá)。

雙飛翼據(jù)考源自淘寶UED，應(yīng)該是一種頁面的形象的表達(dá)。

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

圣杯布局和雙飛翼布局解決問題的方案在前一半是相同的，也就是三欄全部float浮動(dòng)，但左右兩欄加上負(fù)margin讓其跟中間欄div并排，以形成三欄布局。

不同在于解決”中間欄div內(nèi)容不被遮擋“問題的思路不一樣：

圣杯布局，為了中間div內(nèi)容不被遮擋，將中間div設(shè)置了左右padding-left和padding-right后，將左右兩個(gè)div用相對(duì)布局position: relative并分別配合right和left屬性，以便左右兩欄div移動(dòng)后不遮擋中間div。

雙飛翼布局，為了中間div內(nèi)容不被遮擋，直接在中間div內(nèi)部創(chuàng)建子div用于放置內(nèi)容，在該子div里用margin-left和margin-right為左右兩欄div留出位置。

多了1個(gè)div，少用大致4個(gè)css屬性（圣杯布局中間divpadding-left和padding-right這2個(gè)屬性，加上左右兩個(gè)div用相對(duì)布局position: relative及對(duì)應(yīng)的right和left共4個(gè)屬性，一共6個(gè)；而雙飛翼布局子div里用margin-left和margin-right共2個(gè)屬性，6-2=4），個(gè)人感覺比圣杯布局思路更直接和簡潔一點(diǎn)。

簡單說起來就是”雙飛翼布局比圣杯布局多創(chuàng)建了一個(gè)div，但不用相對(duì)布局了“，而不是你題目中說的”去掉relative"就是雙飛翼布局“

實(shí)現(xiàn)效果：

效果圖

實(shí)現(xiàn)代碼

圣杯：

圣杯代碼

雙飛翼

雙飛翼代碼

flex

flex布局