作用:
圣杯布局和双飞翼布局解决的问题都是一样的, 就是两边定宽,中间自适应的三栏布局.中间栏要放在文档流前面有线渲染.
区别:
圣杯布局: 为了中间的内容不被遮挡,将中间的 div 设置了左右padding-left 和 padding-right 后,将左右两个 div 用相对布局position:relative并配合 left 和 right 属性,以便左右两栏 div 移动后不会遮挡住中间的 div.
双飞翼布局: 为了中间内容不被遮挡,直接在中间内部 div 创建子 div用于放置内容,在改 div 使用margin-left 和 margin-right为左右两个 div 留出位置.
/**圣杯布局代码**/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<div id="hd">
Header
</div>
<div id="bd">
<div id="middle">
middle
</div>
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
</body>
</html>
<style type="text/css">
#hd{
height: 50px;
background: #666;
text-align: center;
}
#bd{
/*左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置*/
padding:0 200px 0 180px;
height:100px;
}
#middle{
float: left;
width: 100%;
height: 100px;
background: blue;
}
#left{
float: left;
width: 180px;
height: 100px;
margin-left: -100%;
background: #0c9;
/*中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置*/
position:relative;
left:-180px;
}
#right{
float: left;
width: 200px;
height: 100px;
margin-left: -200px;
background: #0c9;
position: relative;
right: -200px;
}
</style>
/**双飞翼布局**/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<div id="hd">
header
</div>
<div id="md">
<div id="inside">
middle
</div>
</div>
<div id="left">
left
</div>
<div id="right">
right
</div>
<div id="footer">
</div>
</body>
</html>
<style type="text/css">
#hd{
height: 50px;
background: #666;
text-align: center;
}
#md{
float:left;
width:100%;/*左栏上去到第一行*/
height:100px;
background:blue;
}
#left{
float:left;
width:180px;
height:100px;
margin-left:-100%;
background:#0c9;
}
#right{
float:left;
width:200px;
height:100px;
margin-left:-200px;
background:#0c9;
}
/*给内部div添加margin，把内容放到中间栏，其实整个背景还是100%*/
#inside{
margin:0 200px 0 180px;
height:100px;
}
#footer{
clear:both; /*记得清楚浮动*/
height:50px;
background: #666;
text-align: center;
}
</style>
