区别
- 圣杯布局给中间div分别设置左右内边距后，将左右两个div进行定位并设置right和left属性，以便不遮挡中间div；
- 双飞翼布局直接在中间div内部创建子div用于放置内容，在该子div里分别设置左右外边距为左右两栏div留出位置。
作用
圣杯布局和双飞翼布局解决的问题是相同的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。
圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
</head>
<style type="text/css">
*{
margin:0 auto;
padding:0px;
}
.root{
padding: 0 180px 0 200px;
}
.root> div{
float:left;
height: 500px;
}
#main{
width: 100%;
background:pink;
}
#left{
width: 200px;
background:blue;
margin-left: -100%;
position: relative;
left:-200px;
}
#right{
width: 180px;
background-color: greenyellow;
margin-right:-180px;
/* position:relative;
right:-180px
*/
}
#footer{
width: 100%;
background-color: black;
height: 200px;
}
#header{
width: 100%;
background-color: peru;
height: 200px;
}
/* 防止高度坍塌 */
/* #clear{
clear:both;
} */
.root::after{
content: '';
height: 0px;
visibility:hidden;
clear:both;
display: block;
}
</style>
<body>
<div id="header"></div>
<div class="root">
<div id="main"></div>
<div id="left"></div>
<div id="right"></div>
</div>
<!-- <div id="clear"></div> -->
<div id="footer"></div>
</body>
</html>
双飞翼布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style type="text/css">
*{
margin: 0px;
padding:0px;
}
#root{
width:100%;
}
#root > div{
float:left;
height: 500px;
}
#main{
width: 100%;
background-color: pink;
/* padding: 0 200px 0 180px; */
}
#left{
width: 200px;
background:yellow;
margin-left:-100%;
}
#right{
width: 180px;
background:red;
margin-left: -180px;
}
#content{
height: 100%;
width: 100%;
padding: 0 180px 0 200px;
background-color: cadetblue;
}
#footer{
width: 100%;
background-color: black;
height: 200px;
}
#header{
width: 100%;
background-color: peru;
height: 200px;
}
#root::after{
content: '';
display: block;
clear: both;
height: 0px;
visibility: hidden;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="root">
<div id="main">
<div id="content">
</div>
</div>
<div id="left"></div>
<div id="right"></div>
</div>
<div id="footer"></div>
</body>
</html>
