對於聖杯和雙飛翼的布局這種專業性的名詞，可能很多人不理解；但要是說到在傳統的流式布局中如何實現三欄式布局中，左右兩欄固定寬度，中間欄自適應的問題。可能很多人都會恍然大悟。而聖杯和雙飛翼布局正是為了解決這個問題而衍生出的兩種比較經典的解決方案。
一、關於聖杯布局
聖杯布局最早由 matthew levine 在一篇文章中提出，這種左右兩欄固定中間自適應的布局；他將其命名為holy grail(聖杯)這就是聖杯布局的來歷。聖杯布局實現左右兩欄固寬中間自適應的方案是:在三欄的最外層包裹乙個div，然後通過浮動以及定位的方式將所有欄放置到相應的位置從而達到中間自適應左右兩邊固定的布局。
大概實現流程大體有三步：1.建立乙個基本的上中下三部分，然後將中間部分的左右內邊距設定為左右兩欄的寬度；2.向中間部分新增列，然後將新增的列設定為浮動以便於後面三列能夠被放置在同一行上；3.通過定位以及邊距的調整將其每一列放置到對應的欄中。最後我們可以通過設定min-width來保證布局的正確顯示
具體的流程如下：
step1:create the frame 首先建立乙個框架,由三部分組成；頭部、中間部分以及尾部 然後我們設定中間部分的左右內邊距為我們想要的左右兩欄的寬度
step2:add the cloumns
第二步我們需要向中間部分新增列，新增的列就是我們所需要的欄數；這裡我們需要三行；所以我們將新增三列
接下來我們給這三欄新增適當的寬度並浮動他們，當然為了防止尾部的位置受到浮動的影響變化，我們需要清除浮動
注意：在我們新增欄數的時候,我們需要將處於中間欄的標籤寫在其他欄之前；這麼做是因為中間欄的寬度
設定的是100% 如果不寫在其他欄前面；那麼當浮動的時候中間這一欄的前後欄會各自佔據一行的空間。從而導致留白等問題。
step3:pull the left cloumn into place
描述：將左邊列放置到左欄中，首先我們設定左邊列的左外邊距為-100%這樣左邊行就完全處於container這個容器的最左邊 然後我們需要用定位將其調整到左側：具體的方法是設定其為相對定位並且right值為其寬度，那樣左列就會向左平移其寬度個單位 從而達到放置到左字段置的目的。
step4 pull the right cloumn into place
描述：將右列放置到右欄中，具體的操作可以參考左欄；但是作者在這裡提供了乙個比較簡單的方法
就是直接設定其margin-right值為負的其寬度個單位，這樣右列就會自動公升到右欄中
至此，基本上完成了整個聖杯布局，然後我們為了確保能夠正確的顯示；我們需要將body的寬度設定乙個最小寬度以確保聖杯布局能夠正確的顯示在使用者的介面上
這個寬度為：2*左列的寬+右列的寬(在我們這裡為2*150px+120px)
具體的實現細節參考：這篇文章
下面是我自己的實現**，和文章中基本相似
ps：這裡分享我剛剛接觸到的乙個知識點，也是我的乙個知識盲區；我發現在左欄和右欄中輸入英文本元時，並不會自動換行；而是會一直增加寬度；甚至右邊欄都出現了滾動橫條。後來經過查閱我才發現，原來瀏覽器在解析英文，純數字時；不會自動斷行，會撐開所在區域塊。我們需要手動換行，設定word-wrap屬性為break-word即可解決這個問題。同樣這個問題嚴謹一點的說法是：英文單詞沒有結束之前是不能自動換行的，而每個英文單詞之間都是用空格來分隔，所以我們連續的英文會被認為是乙個單詞；所以自動換行會出現問題。
雙飛翼布局：雙飛翼布局是國內比較經典的固比固布局方式，最早由**ued玉伯大大提出；是為了應對聖杯布局的缺陷：即當瀏覽器的寬度無限制縮小時；聖杯會「碎掉」。因此提出了這種和聖杯類似的固比固布局，雙飛翼布局也是和聖杯布局一樣，中間內容優先渲染；但他只使用了負邊距加上浮動實現。只不過在聖杯布局的中間欄外包裹了一層div，用來代替相對定位。從而實現布局關於聖杯布局以及雙飛翼布局的比較可以參見這篇文章
聖杯布局和雙飛翼布局的實現可以參見這篇文章。
需要說明的是，這裡的聖杯布局和雙飛翼布局只是兩種比較經典的固比固布局；他們實現的目標是左右兩欄固寬。中間一欄自適應，並力求用最簡單的辦法實現最好的相容性。
這是一種布局的思想，我們需要理解的應該是其中所包含的布局思想；實現的**有很多中，只要我們的思路是對的。那麼我們就能夠實現這兩種布局，通過其他的方式。
另外隨著技術的不斷發展，現在css3中的flex布局以及grid布局實現這些起來應該更容易理解；只不過受制於不同瀏覽器相容性的問題。
如果你發現文章中有什麼錯誤，煩請指正；或者發郵件到[email protected]
聖杯與雙飛翼布局
聖杯布局和雙飛翼布局解決的問題是一樣的，就是兩邊定寬，中間自適應的三欄布局，中間欄要放在文件流前面以優先渲染。但是聖杯布局和雙飛翼布局在實現方式上有一點差別。聖杯布局的來歷是2006年發在a list part上的這篇文章 雙飛翼布局介紹 始於 ued 聖杯是西方表達 渴求之物 的意思，不是一種對頁...
聖杯和雙飛翼布局
聖杯布局 原理 給包裹層設定左右padding值空出left和right的位置，使用負邊距，左邊margin left 100 右邊margin left 100px 此時左右兩個盒子位於主盒子兩側但是會遮擋住主盒子的內容，所以再給左盒子position relative，left 100px，右盒...
聖杯 雙飛翼布局
自己雖然經歷著web應用的開發,總是拿著別人寫好的css來引用到自己的專案當中,甚至一度迷上了bootstrap,發現有了它自己可以不用在寫程式邏輯的同時還要去修改別人的css.當然開發的應用大多數是企業內部應用,個別網際網路的程式.2016偶然的機會接觸到前端這個概念,發現自己還是挺喜歡前端的這些...