作用:两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局。(中间先加载渲染)
区别:圣杯布局主要是利用父容器的左右内边距以及左右列的相对定位。(float+position)
双飞翼布局是把主列嵌套在父容器中,再用主列的左右外边距进行调整。(float)
圣杯布局
代码:
<style>
header,
footer {
height: 50px;
background-color: pink;
}
.wrapper {
padding: 0 200px;
}
.center {
float: left;
width: 100%;
background-color: red;
}
.left {
float: left;
width: 200px;
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
float: left;
width: 200px;
margin-left: -200px;
position: relative;
right: -200px;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<header>头部</header>
<div class="clearfix wrapper">
<div class="center">主区域</div>
<div class="left">左区域</div>
<div class="right">右区域</div>
</div>
<footer>底部</footer>
</body>
结果截图
双飞翼布局
代码:
<style>
header,
footer {
height: 50px;
background-color: pink;
}
.wrapper {
float: left;
width: 100%;
}
.center {
margin: 0 200px;
background-color: red;
height: 50px;
}
.left {
float: left;
width: 200px;
margin-left: -100%;
}
.right {
float: left;
width: 200px;
margin-left: -200px;
}
footer {
clear: both;
}
</style>
</head>
<body>
<header></header>
<div class="wrapper">
<div class="center">中间区域</div>
</div>
<div class="left">左区域</div>
<div class="right">右区域</div>
<footer></footer>
</body>
运行结果