圣杯布局和双飞翼布局都是为了左右两栏固定宽度,中间部分自适应
的布局效果。
但是,具体实现还是有一些区别,如下:
1. 圣杯布局
html代码:
<body>
<div id="header">header</div>
<div id="container">
<div id="middle" class="column">middle</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>
</div>
<div id="footer">footer</div>
</body>
css代码:
body{
margin: 0px;
padding: 0px;
min-width: 550px;
}
#header{
width:100%;
background-color:darkgrey;
height: 30px;
}
#container {
padding-left: 200px;
padding-right: 150px;
overflow: hidden;
}
#middle {
width: 100%;
background-color: green;
height: 500px;
}
#left {
width: 200px;
margin-left: -100%;
position: relative;
right: 200px;
background-color: red;
height: 500px;
}
#right {
width: 150px;
margin-right: -150px;
background-color: blue;
height: 500px;
}
#footer{
width:100%;
background-color:darkgrey;
height: 30px;
}
.column {
float: left;
}
实现效果:
2.双飞翼布局
html代码:
<body>
<div id="header">header</div>
<div id="container">
<div id="middle" class="column">middle</div>
</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>
<div id="footer">footer</div>
</body>
css代码:
body{
margin: 0px;
padding: 0px;
min-width: 500px;
}
#header{
width:100%;
background-color:darkgrey;
height: 30px;
}
#container {
width: 100%;
}
#middle {
margin-left: 200px;
margin-right: 150px;
background-color: green;
height: 500px;
}
#left {
width: 200px;
margin-left: -100%;
background-color: red;
height: 500px;
}
#right {
width: 150px;
margin-left: -150px;
background-color: blue;
height: 500px;
}
#footer{
width:100%;
background-color:darkgrey;
height: 30px;
clear: both;
}
.column {
float: left;
}
实现效果:
其实他们的实现方案大体相同,都是三栏全部float:left浮动,区别在于解决中间栏div的内容不被遮挡上,圣杯布局是中间栏在添加相对定位,并配合left和right属性,效果上表现为三栏是单独分开的(如果可以看到空隙的话),而双飞翼布局是在中间栏的div中嵌套一个div,内容写在嵌套的div里,然后对嵌套的div设置margin-left和margin-right,效果上表现为左右两栏在中间栏的上面,中间栏还是100%宽度,只不过中间栏的内容通过margin的值显示在中间。大概可以用下面这张图表示: