圣杯布局 双飞翼布局
概述
要求：两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。
异同点：圣杯是采用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>
