圣杯布局和双飞翼布局其实是一回事。
它们实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应，也就是我们常说的固比固布局。它们实现的效果是一样的，差别在于其实现的思想。
效果：
shengbeibuju.png
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>圣杯布局与双飞翼布局</title>
</head>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
header,#footer{
height: 60px;
width: 100%;
border: 1px solid #ccc;
}
main{
overflow: hidden;
border: 1px solid #ccc;
}
.middle,.left,.right{
min-height: 100px;
float: left;
}
.middle{
width: 100%;
background-color: #eee;
}
.left{
width: 200px;
background-color: #777;
}
.right{
width: 200px;
background-color: #999;
}
/重点来了/
/*1.通过margin-left把左右的两个div移到上面去
margin-left是-100%将落到最左边，负自身刚好在右边
2.设置外层盒子的左右的padding宽
3.通过相对定位，移动左右两个固定宽的盒子*/
.left{
margin-left: -100%;
}
.right{
margin-left: -200px;
}
/圣杯布局/
/*#main{
padding: 0 200px;
}
.middle,.left,.right{
position: relative;
}
.left{
left: -200px;
}
.right{
right: -200px;
}*/
/变异体，双飞翼布局/
.middle-box{
margin: 0 200px;
}
</style>
<body>
<div id="header"></div>
<div id="main">
<div><div><h1>center</h1></div></div>
<div><h1>left</h1></div>
<div><h1>right</h1></div>
</div>
<div id="footer"></div>
</body>
</html>
网友评论