圣杯布局和双飞翼布局
圣杯布局&双飞翼布局
我们能够发现，其实圣杯布局和双飞翼布局非常相像。因为圣杯布局是阿里巴巴的玉伯（Sea.js的创始人）根据圣杯布局来改造的。用于两边的子面板固定，中间区域自适应的布局。
圣杯布局存在一个缺点：就是当我们的 .middle 设置的宽度比两边小的时候，布局就会乱掉。双飞翼在中间的区域添加了一个子节点，给父节点添加margin属性来左右面板留出空间。用margin来撑开空间。
所以综合起来，双飞翼布局和圣杯布局的区别在于：
·
双飞翼布局给主面板添加了一个父标签用来通过margin给子面板腾出空间。
·
·
双飞翼布局不用设置相对布局，以及对应的left和right值。
·
当然，基于float布局的圣杯布局和双飞翼布局都有自己的缺陷，当前的趋势是flex和grid布局，代码更少更加灵活。圣杯布局对于我们对CSS的理解和布局的理解还是有帮助的。
圣杯布局和双飞翼布局的源码
圣杯布局的源码
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
body,header,div,h4,footer{
margin: 0;
padding: 0;
text-align: center;
}
header{
width: 100%;
height: 50px;
background-color: red;
}
.container{
height: 200px;
overflow: hidden;
padding: 0 200px; /*利用和下面的.left{position: relative;left:-200px;}
以及.right{position: relative;right:-200px;}来避免中间的内容区被缩放时的左右div给覆盖*/
}
.middle{
width: 100%;
height: 200px;
background-color: #ECECEC;
float: left;
}
.left{
width: 200px;
height: 200px;
position: relative;
left: -200px;
margin-left: -100%; /*紧贴左边*/
background-color: blue;
float: left;
}
.right{
width: 200px;
height: 200px;
position: relative;
right: -200px;
margin-left: -200px; /*紧贴右边*/
background-color: yellow;
float: left;
}
footer{
width: 100%;
height: 50px;
background-color: black;
}
</style></head><body>
<header><h4>内容区</h4></header>
<div class="container">
<div class="middle"><h4>中间弹性区</h4></div>
<div class="left"><h4>左边栏</h4></div>
<div class="right"><h4>右边栏</h4></div>
</div>
<footer><h4>footer内容区</h4></footer></body></html>双飞翼布局的源码
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>
body,header,div,h4,footer{
margin: 0;
padding: 0;
text-align: center;
}
header{
width: 100%;
height: 50px;
background-color: red;
}
.container{
height: 200px;
overflow: hidden;
}
.middle{
width: 100%;
height: 200px;
background-color: #ECECEC;
float: left;
}
.in{
padding: 0 200px 0 200px;
}
.left{
width: 200px;
height: 200px;
margin-left: -100%; /*紧贴左边*/
background-color: blue;
float: left;
}
.right{
width: 200px;
height: 200px;
margin-left: -200px; /*紧贴右边*/
background-color: yellow;
float: left;
}
footer{
width: 100%;
height: 50px;
background-color: black;
}
</style></head><body>
<header><h4>内容区</h4></header>
<div class="container">
<div class="middle"><div class="in"><h4>中间弹性区</h4></div></div>
<div class="left"><h4>左边栏</h4></div>
<div class="right"><h4>右边栏</h4></div>
</div>
<footer><h4>footer内容区</h4></footer></body></html>