三欄佈局之聖盃佈局
阿新 • • 發佈：2018-12-10
聖盃佈局是左、中、右三欄被囊括在container中。 固定左右兩欄的寬度，讓main欄，即中間欄自適應大小。基礎程式碼如下：
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>先看一個container的內邊距和content的關係：設定container的左右內邊距為三欄佈局中左右兩欄的寬度。main設定為content的寬度，實現自適應。
1.設定left和right的寬度，分別為200px和300px;
.left{
width: 200px;
background-color: red;
}
.right{
width: 300px;
background-color: blue;
}2.設定container的padding，padding-left和padding-right的寬度分別是left和right的寬度，即200px,300px。在此設定頂部和底部為0.container的坐內邊距、右內邊距的寬度用於存放left、right。
.container{
padding: 0 200px 0 300px;
}3.給container裡面的left，right，和main設定一個統一的高度，為150px;
.main,.left,.right{
min-height: 150px;
}4.main的寬度佔據了container的content的全部寬度，所以，width:100%;
.main{
background-color: yellow;
width: 100%;
}5.讓container裡的三欄都相對定位且浮動
.container>div{
position: relative;
float: left;
}現在的情況是這樣：
我要實現的樣式是像下面這個這樣：那麼應該怎麼做呢？
1.設定left的margin-left：-100%；將left設定到main的左邊；
2.將right移動到main的右邊：margin-left：-300px;
3.最後一步，將left和right移動到padding的left和right部分；left:-200px;right:-300px;
全部程式碼如下：
<!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>
.left{
width: 200px;
background-color: blue;
margin-left: -100%;
left:-200px;
}
.right{
width: 300px;
background-color: red;
margin-left: -300px;
right:-300px;
}
.main{
background-color: yellow;
width: 100%;
}
.main,.left,.right{
min-height: 150px;
}
.container{
padding: 0 300px 0 200px;
/* overflow:hidden; */
}
.container>div{
position: relative;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>