概述 要求：兩邊頂寬，中間自適應的三欄佈局，中間欄要在放在文檔流前面以優先渲染。 異同點：聖杯是採用left和right相對定位的方式；而雙飛翼是在center裡面又創建了一個子div，在該子div里用margin left和margin right為左右兩欄div留出位置。 聖杯佈局 雙飛翼佈局 ...
概述
要求：兩邊頂寬，中間自適應的三欄佈局，中間欄要在放在文檔流前面以優先渲染。
異同點：聖杯是採用left和right相對定位的方式；而雙飛翼是在center裡面又創建了一個子div，在該子div里用margin-left和margin-right為左右兩欄div留出位置。
聖杯佈局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>雙飛翼</title>
<style type="text/css">
#header, #footer{
height: 30px;
background: #ccc;
}
#left{
background: red;
height: 100px;
}
#center{
background: green;
height: 100px;
}
#right{
background: yellow;
height: 100px;
}
</style>
<style type="text/css">
body {
min-width: 550px;
}
#container {
padding-left: 200px;
padding-right: 150px;
}
.column{
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px;
margin-left: -100%;
position: relative;
left:-200px;
/*對於浮動元素，負margin值等於100%可以讓元素上去,並且和開始的位置頭部對齊*/
}
#right {
width: 150px;
margin-left: -150px;
position: relative;
right:-150px;
/*對於浮動元素，負margin值等於本身可以讓元素上去*/
}
#footer {
clear: both;
}
</style>
</head>
<body>
<div id="header">頭部</div>
<div id="container">
<div id="center" class="column">1234</div>
<div id="left" class="column">左側邊欄，固定寬度</div>
<div id="right" class="column">右側邊欄，固定寬度</div>
</div>
<div id="footer">尾部</div>
</body>
</html>
雙飛翼佈局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>雙飛翼</title>
<style type="text/css">
#header, #footer{
height: 30px;
background: #ccc;
}
#left{
background: red;
height: 100px;
}
#center{
background: green;
height: 100px;
}
#right{
background: yellow;
height: 100px;
}
</style>
<style type="text/css">
body {
min-width: 550px;
}
#container {
}
.column{
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px;
margin-left: -100%;
/*對於浮動元素，負margin值等於100%可以讓元素上去,並且和開始的位置頭部對齊*/
}
#right {
width: 150px;
margin-left: -150px;
/*對於浮動元素，負margin值等於本身可以讓元素上去*/
}
#center .center-wrap{
margin-left:200px;
margin-right: 100px;
}
#footer {
clear: both;
}
</style>
</head>
<body>
<div id="header">頭部</div>
<div id="container">
<div id="center" class="column">
<div class="center-wrap"> 雙飛翼佈局指兩邊頂寬，中間自適應的三欄佈局，中間欄要在放在文檔流前面以優先渲染。</div>
</div>
<div id="left" class="column">左側邊欄，固定寬度</div>
<div id="right" class="column">右側邊欄，固定寬度</div>
</div>
<div id="footer">尾部</div>
</body>
</html>參考文章
http://www.cnblogs.com/tinyphp/p/4742922.html
