版權聲明： https://blog.csdn.net/Ivana_zyf/article/details/79149455
聖盃佈局圖解
聖盃佈局和雙飛翼佈局實現的問題都是三列布局，兩邊定寬，中間自適應佈局，中間欄要在放在文檔流前面以優先渲染。
1、給middle部分設 width:100%，給left、right設寬度，三者都 float:left。
2、給外面最大的塊all設左右padding，把middle拉出來，這樣left和right去了自己的位置之後就不會把middle內容蓋住了。
3、因爲middle寬度爲100%，left應該在最左邊所以往左拉寬度100%（margin-left:-100%）,而right只需要往回拉自己的寬度大小就可以（margin-left: number px）。這樣就在一行了。
4、最後left和right還蓋着我middle的位置，再把他們拉回剛開始騰出來的位置就好了。（給left和right加相對定位position：relative之後，設left的left爲負的它的寬，設right的right爲right負的它的寬。）ok，over！
思路就是這樣，按這個思路的middle需要佈局在最前面(中間欄重要的東西)要在放在文檔流前面以優先渲染。，依次是left和right。你也可以根據自己的需要更改佈局，對應的更改樣式。
聖盃佈局和雙飛翼佈局的區別：
解決”中間欄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屬性（聖盃佈局中間div的padding-left和padding-right這2個屬性，加上左右兩個div用相對佈局position: relative及對應的right和left共4個屬性，一共6個；而雙飛翼佈局子div裏用margin-left和margin-right共2個屬性，6-2=4），個人感覺雙飛翼佈局思路更直接和簡潔一點。