聖杯佈局和雙飛翼佈局的目的都是：左右兩欄固定寬度，中間部分自適應； 聖杯佈局 聖杯佈局HTML： 聖杯佈局CSS: 聖杯佈局的優點： 使主要內容列先載入。 允許任何列是最高的。 沒有額外的div。 需要的hack很少。 雙飛翼佈局 雙飛翼HTML 雙飛翼CSS 聖杯佈局和雙飛翼的比較： 1.兩種佈局 ...
聖杯佈局和雙飛翼佈局的目的都是：左右兩欄固定寬度，中間部分自適應；
聖杯佈局
聖杯佈局HTML：
<div class="wrap">
<div class="main">
我是主要
</div>
<div class="left">
我是左邊
</div>
<div class="right">
我是右邊
</div>
</div>
聖杯佈局CSS:
* {
margin: 0;
padding: 0
}
.main {
background-color: yellow;
height: 100px;
float: left;
width: 100%;
}
.left {
background-color: red;
width: 200px;
height: 100px;
float: left;
margin-left: -100%; /*margin負邊距*/
position: relative; /*相對自身偏移*/
left: -200px;
}
.right {
background-color: blue;
width: 200px;
height: 100px;
float: left;
margin-left: -200px; /*margin負邊距*/
position: relative; /*相對自身偏移*/
right: -200px;
}
.wrap {
padding: 0 200px; /*父級設置padding*/
}
聖杯佈局的優點：
使主要內容列先載入。
允許任何列是最高的。
沒有額外的div。
需要的hack很少。
雙飛翼佈局
雙飛翼HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>
雙飛翼佈局
</title>
<link rel="stylesheet" href="main.css"/>
</head>
<body>
<div class="main-wrap"> <!-- 把main嵌套在一個div裡面 -->
<div class="main">
我是主要
</div>
</div>
<div class="left">
我是左邊
</div>
<div class="right">
我是右邊
</div>
</body>
</html>
雙飛翼CSS
.main-wrap {
float: left;
width: 100%;
}
.main {
height: 100px;
margin-left: 200px; /*利用左、右外邊距定位*/
margin-right: 200px;
background-color: yellow;
}
.left {
background-color: red;
width: 200px;
height: 100px;
float: left;
margin-left: -100%;
}
.right {
background-color: blue;
width: 200px;
height: 100px;
float: left;
margin-left: -200px;
}
聖杯佈局和雙飛翼的比較：
1.兩種佈局都是把主要內容放在前面載入；
2.佈局有相似之處，都使用了負外邊距來佈局；
3.不同：
聖杯佈局是設置 父容器的padding值、相對定位來實現；
雙飛翼佈局是給main添加了一個div容器、設置main的左右外邊距 來實現；
