圣杯布局和双飞翼布局都是为了解决两边定宽，中间自适应的三栏布局，中间栏放在文档流前面以优先渲染的页面布局问题。
圣杯布局
1、左、中、右三者都设置向左浮动；
2、设置 middle 宽度为100%；
3、设置负边距，left 设置负左边距为100%，right 设置负左边距为负的自身宽度。
4、设置 container 的 padding 值为左右两个子面板留出空间。
5、设置两个子面板为相对定位，left 的 left 值为负的 left div 宽度，right 的 right 值为负的 right div 的宽度。
参考了大神们的资料后，接下来，一步步来实现圣杯布局：
先来写个大体框架：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
*{
margin: 0;
padding: 0;
text-align: center;
}
body{
background-color: #fff;
}
header{
width: 100%;
height: 50px;
line-height: 50px;
background-color: darkseagreen;
}
footer{
width: 100%;
height: 50px;
line-height: 50px;
background-color: slategray;
}
.container{
padding-left: 200px;
padding-right: 180px;
}
.container > div{
float: left;
}
.middle{
width: 100%;
height: 500px;
line-height: 500px;
background-color: pink;
}
.left{
width: 200px;
height: 400px;
line-height: 400px;
background-color: skyblue;
}
.right{
width: 180px;
height: 400px;
line-height: 400px;
background-color: orange;
}
.container:after {
content: '.';
height: 0;
display: block;
visibility: hidden;;
clear: both;
zoom: 1;
}
</style>
</head>
<body>
<header><h4>Header</h4></header>
<div class="container">
<div class="middle"><h4>Middle</h4></div>
<div class="left"><h4>Left</h4></div>
<div class="right"><h4>Right</h4></div>
</div>
<footer><h4>Footer</h4></footer>
</body>
</html>
如图：
接下来，将 left div 移动到最左边的位置上：
.left{
margin-left: -100%;
}
如图：
然后，将 right div 移动到上面：
.right{
margin-left: -180px;
}
如图：
左侧 margin-left：-100%：是将 left 这个块会向左移动100%，100%是父级宽度的100%，就正好到了父级的左边。（center的宽度也是100%，正好充满父级的width，不包括padding，所以也到了center的左边）
右侧 margin-left：-200px；向左移动了200px。也就是 right div 本身的宽度，所以到达了父级的右侧。
然后，使用相对定位，将 left div 偏移到最左边：
.left{
position: relative;
left: -200px;
}
如图：
然后，使用相对定位，将 right div 偏移到最右边：
.right{
position: relative;
right: -180px;
}
如图：
完整版代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
*{
margin: 0;
padding: 0;
text-align: center;
}
body{
background-color: #fff;
}
header{
width: 100%;
height: 50px;
line-height: 50px;
background-color: darkseagreen;
}
footer{
width: 100%;
height: 50px;
line-height: 50px;
background-color: slategray;
}
.container{
padding-left: 200px;
padding-right: 180px;
}
.container > div{
float: left;
}
.middle{
width: 100%;
height: 500px;
line-height: 500px;
background-color: pink;
}
.left{
width: 200px;
height: 400px;
line-height: 400px;
background-color: skyblue;
margin-left: -100%;
position: relative;
left: -200px;
}
.right{
width: 180px;
height: 400px;
line-height: 400px;
background-color: orange;
margin-left: -180px;
position: relative;
right: -180px;
}
.container:after {
content: '.';
height: 0;
display: block;
visibility: hidden;;
clear: both;
zoom: 1;
}
</style>
</head>
<body>
<header><h4>Header</h4></header>
<div class="container">
<div class="middle"><h4>Middle</h4></div>
<div class="left"><h4>Left</h4></div>
<div class="right"><h4>Right</h4></div>
</div>
<footer><h4>Footer</h4></footer>
</body>
</html>
但是，圣杯布局有个问题：
当面板的 middle 部分比两边的子面板宽度小的时候，布局就会乱掉。
因此，就有了双飞翼布局来克服这个问题，双飞翼布局在主面板上选择了添加一个标签，完美地解决了圣杯布局的问题。
双飞翼布局
1、左、中、右三者都设置向左浮动。
2、设置 middle 宽度为100%。
3、设置 负边距，left div 设置负左边距为100%，right div 设置负左边距为负的自身宽度。
4、设置main div 的 margin 值给左右两个子面板留出空间。
大体框架：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
*{
margin: 0;
padding: 0;
text-align: center;
}
body{
background-color: #fff;
}
header{
width: 100%;
height: 50px;
line-height: 50px;
background-color: darkseagreen;
}
footer{
width: 100%;
height: 50px;
line-height: 50px;
background-color: slategray;
}
.container{
/*padding-left: 200px;
padding-right: 180px;
*/
}
.left,.middle,.right {
float: left;
}
.main{
}
.middle{
width: 100%;
height: 500px;
line-height: 500px;
background-color: pink;
}
.left{
width: 200px;
height: 400px;
line-height: 400px;
background-color: skyblue;
/*position: relative;
left: -200px;*/
}
.right{
width: 180px;
height: 400px;
line-height: 400px;
background-color: orange;
/*position: relative;
right: -180px;*/
}
.container:after {
content: '.';
height: 0;
display: block;
visibility: hidden;;
clear: both;
zoom: 1;
}
</style>
</head>
<body>
<header><h4>Header</h4></header>
<div class="container">
<div class="middle">
<div class="main">Main</div>
</div>
<div class="left"><h4>Left</h4></div>
<div class="right"><h4>Right</h4></div>
</div>
<footer><h4>Footer</h4></footer>
</body>
</html>
如图：
接下来，设置中间块的 margin：
.main{
margin-left: 200px;
margin-right: 180px;
}
然后，将 left 块向上移动：
.left{
margin-left: -100%;
/*position: relative;
left: -200px;*/
}
如图：
然后，将 right 块向上移动：
.right{
margin-left: -180px;
/*position: relative;
right: -180px;*/
}
双飞翼效果出来啦，如图：
完整版代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
*{
margin: 0;
padding: 0;
text-align: center;
}
body{
background-color: #fff;
}
header{
width: 100%;
height: 50px;
line-height: 50px;
background-color: darkseagreen;
}
footer{
width: 100%;
height: 50px;
line-height: 50px;
background-color: slategray;
}
.container{
/*padding-left: 200px;
padding-right: 180px;
*/
}
.left,.middle,.right {
float: left;
}
.main{
margin-left: 200px;
margin-right: 180px;
}
.middle{
width: 100%;
height: 500px;
line-height: 500px;
background-color: pink;
}
.left{
width: 200px;
height: 400px;
line-height: 400px;
background-color: skyblue;
margin-left: -100%;
/*position: relative;
left: -200px;*/
}
.right{
width: 180px;
height: 400px;
line-height: 400px;
background-color: orange;
margin-left: -180px;
/*position: relative;
right: -180px;*/
}
.container:after {
content: '.';
height: 0;
display: block;
visibility: hidden;;
clear: both;
zoom: 1;
}
</style>
</head>
<body>
<header><h4>Header</h4></header>
<div class="container">
<div class="middle">
<div class="main">Main</div>
</div>
<div class="left"><h4>Left</h4></div>
<div class="right"><h4>Right</h4></div>
</div>
<footer><h4>Footer</h4></footer>
</body>
</html>
总结
双飞翼布局与圣杯布局的主要区别：
（1）双飞翼布局给主面板添加了一个父标签用来通过 margin 给子面板腾出空间。
（2）圣杯采用的是 padding，而双飞翼采用的 margin，解决了圣杯布局的问题。
（3）双飞翼布局不用设置相对布局，以及对应的 left 和 right 的值。
扫一扫
1881
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
