CSS中的聖盃佈局，以及聖盃佈局與雙飛翼佈局的區別
阿新 • • 發佈：2019-02-13
為了解決中間寬度自適應，左右列固定寬度，最早出現的是聖盃佈局，雙飛翼佈局是對聖盃佈局的改良，同樣這種
佈局的優勢在於在中間列中的文件可以優先渲染。
1.什麼是聖盃佈局
其實對於聖盃佈局，前面一部分與雙飛翼佈局完全相同
<style>
.column{
float:left
}
.container{
width:100%
}
.column{
height:300px;
}
#center_panel
width:100%;
background-color:red;
}
#right_panel{
width:300px;
margin-left:-100%;
background-color:green;
}
#left_panel{
width:300px;
margin-left:-300px;
background-color:green;
}
</style>
<body>
<div class="container"
<div class="column" id="center_panel"></div>
<div class="column" id="right_panel"></div>
<div class="column" id="left_panel"></div>
</div>
</body>
</html>
這樣，大致實現了中間寬度自適應，左邊和右邊的寬度恆定，但是同時也出現了問題，就是中間panel
的部門內容被左邊和右邊的固定寬度層給遮擋了。
雙飛翼佈局和聖盃佈局，也就是在如果解決中間層被遮擋的問題上會有不同。
2.聖盃佈局如何解決中間層被遮擋
聖盃佈局通過padding來解決此問題，因為左邊的固定寬度為300px;右邊的固定列的寬度為300px;
我們設想可以用padding-left:300px;padding-right:300px;來解決問題，然而我們發現，如果
簡單的設定
.container{
padding-left:300px;
paddding-right:300px;
}
出現的效果為：
我們發現左右兩列也會同時具有padding值，為了達到不覆蓋中間層，並且左右兩列沒有padding，這裡我們對於左右邊列，實行相對定位relative;
具體設定如下：
#right_panel{
width:300px;
margin-left:-100%;
background-color:green;
position: relative;
left:-300px;
}
#left_panel{
width:300px;
margin-left:-300px;
background-color:green;
position: relative;
left:-300px;
}
如此一來，我們就實現了聖盃佈局，並且左右的列也不會覆蓋中間列的一些內容，效果如下（PS：relative和浮 動可以混用）：
3.雙飛翼佈局如何解決中間部分被覆蓋的方法
雙飛翼佈局解決中間層覆蓋的方法
很簡單，就是在center_panel的這一層中增加了一個div，並且設定了這個
div為
<div class="container">
<div class="column" id="center_panel">
<div id="center_child_panel"></div>
</div>
<div class="column" id="right_panel"></div>
<div class="column" id="left_panel"></div>
</div>
並且設定：
#center_child_panel{
margin-left:300px;
margin-right:300px;
} 至此我們實現了雙飛燕佈局中解決中間層被左右邊列覆蓋的問題，效果如下：