说明:圣杯布局和双飞翼布局,它们的都是要求三栏布局,中间宽度自适应,两边定宽,这样做的优势是重要的东西放在文档流前面可以优先渲染,二双飞翼布局是对圣杯布局的一种改良。
1.圣杯布局: 用到浮动,负边距,相对定位,不添加额外标签。
html部分:
<div class = "header"> header </div>
<div class = "bd">
<div class = "main" > main </div>
<div class = "left" > left </div>
<div class = "right" > right </div>
</div>
<div class = "footer"> footer </div>
css 部分
*{margin:0 auto};
.header,.footer{
width:100%;
background: #666;
height:30px;
clear:both;
}
.bd{
padding-left:150px;
padding-right:190px;
}
.left{
height:500px;
background:red;
width:150px;
float:left;
margin-left:-100%;
position:relative;
left:-150px;
}
.main{
height:500px;
background:blue;
width:100%;
float:left;
}
.right{
height:500px;
background:olive;
width:190px;
float:left;
margin-left:-190px;
position:relative;
right:-190px;
}
2.双飞翼布局:
在不增加额外标签的情况下,圣杯布局已经非常完美,圣杯布局使用了相对定位,以后圣杯布局是有局限性的,而且宽度控制要改的地方很多,在淘宝ued讨论下,增加多一个div就可以使用相对布局,只用到了浮动和负边距。
html部分
<div class = "header" > header </div>
<div class = "bd" >
<div class = "main >
<div class = "inner" > main </div>
</div>
<div class = "left" > left </div>
<div class = "right" > right </div>
</div>
<div class = "footer" > footer </div>
css部分
*{margin:0 auto};
.header,.footer{
width:100%;
background:#008888;
height:100px;
clear:both;
}
.left{
height: 300px;
background:red;
width:150px;
float:left;
margin-left:-100%;
}
.main{
height:300px;
background:blue;
width:100%;
float:left;
}
.inner{
height:300px;
margin-left:150px;
margin-right:190px;
}
.right{
height:300px;
background:olvie;
width:190px;
float:left;
margin-left:-190px;
}