聖盃佈局和雙飛翼佈局
阿新 • • 發佈：2019-01-08
聖盃佈局
聖盃佈局就是三欄佈局，其中左右兩欄固定寬度，中間部分自適應
主要步驟：
- 在html中，中間的塊在最前面，後面緊跟左邊的塊和右邊的塊
- 三者均設定
float:left，中間塊設定width:100%，此時中間塊在一行，兩個固定寬度的塊在一行。 - 左邊塊設定
margin-left:100%，右邊塊設定margin-left: -width，此時左右塊位於中間塊的兩邊，但是其覆蓋了中間塊的兩側的一部分內容。 - 設定外層容器
padding：0 rightwidth 0 leftwidth，為左右兩邊騰出空白位置。設定左右塊position:relative，且左塊left: -width，且右塊right: -width，使左右快分別向左和右偏移，從而佔據了空白位置。
完整程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style 雙飛翼佈局
雙飛翼佈局與聖盃佈局達成的效果類似，只是實現方法有所差別而已。區別在於雙飛翼給中間塊套了一個容器，通過設定該容器內部的中間塊margin屬性從而使中間塊兩側的內容不被左右塊遮擋。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.box{
overflow: hidden;
border: 2px solid;
}
.middle_box,.left,.right{
float: left;
height: 200px;
}
.middle_box{
background-color: red;
width: 100%;
}
.middle{
margin-left: 100px;
margin-right: 150px;
}
.left{
background-color: blue;
width: 100px;
margin-left: -100%;
}
.right{
background-color: yellow;
width: 150px;
margin-left: -150px;
}
</style>
</head>
<body>
<div class="box">
<div class="middle_box">
<div class="middle">
這是一段很長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長的內容
</div>
</div>
<div class="left">
這是左邊的內容這是左邊的內容這是左邊的內容這是左邊的內容這是左邊的內容這是左邊的內容
</div>
<div class="right">
這是右邊的內容這是右邊的內容這是右邊的內容這是右邊的內容這是右邊的內容這是右邊的內容
</div>
</div>
</body>
</html>