聖杯與雙飛翼布局

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

但是聖杯布局和雙飛翼布局在實現方式上有一點差別。

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

雙飛翼布局介紹-始於**ued：

聖杯是西方表達「渴求之物」的意思，不是一種對頁面的形象表達。雙飛翼據考源自**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，但不用相對布局了「。

id="container"

>

id="main"

class

="col"

>

#main

div>

id="left"

class

="col"

>

#left

div>

id="right"

class

="col"

>

#right

div>

div>

廢話不多說，**很清晰，主體main放置在最前面可以優先載入。

body

.col
#container
#main
#left
#right

當設定完了之後，雖然左右欄定位成功，但是中間main的內容會被遮蓋住。所以在main的父元素container中設定左右padding值。給所有col設定position: relative，再分別給左右欄新增left、right值，使他們定位到正確位置。

與聖杯布局相比，雙飛翼html中為main新增了乙個子元素main-wrap,這個小小的改動是為了之後處理main中內容被遮蓋的問題，這也是兩者實現方式最大的不同點，下面繼續。

body

.col
#main
#main-wrap
#left
#right

之後就是處理main中內容的遮蓋問題，只需設定main-wrap的左右外邊距即可解決。

相比聖杯布局，雙飛翼不必設定左右欄的position: relative，也不必設定左右left、right值，只需多新增乙個子元素包含，相應的padding換成margin。總的說來簡單不少。效果圖如上，就不再新增了。

主要的內容先載入的優化；

相容目前所有的主流瀏覽器，包括ie6在內；

實現不同的布局方式，可以通過調整相關css屬性即可實現。

聖杯 雙飛翼布局

自己雖然經歷著web應用的開發,總是拿著別人寫好的css來引用到自己的專案當中,甚至一度迷上了bootstrap,發現有了它自己可以不用在寫程式邏輯的同時還要去修改別人的css.當然開發的應用大多數是企業內部應用,個別網際網路的程式.2016偶然的機會接觸到前端這個概念,發現自己還是挺喜歡前端的這些...

聖杯布局與雙飛翼布局

聖杯布局和雙飛翼布局都是實現的三欄布局，兩邊的盒子寬度固定，中間盒子自適應，也就是我們常說的固比固布局。它們實現的效果是一樣的，差別在於其實現的思想。聖杯布局的出現是來自於a list part上的一篇文章in search of the holy grail。比起雙飛翼布局，它的起源不是源於對頁面...

雙飛翼布局與聖杯布局

中間層100 佔滿同一高度空間的整層寬度，左右兩層被擠出中間層所在區域時，使用margin left的負值將左右層拉回與中間層同一高度的空間 接著調整左右兩層到指定位置 最後使用margin或padding屬性調整中間層被左右層佔住的顯示區。聖杯布局採用乙個父層包含中間 左右三個子層，設定父層的pa...