圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。
圣杯布局与双飞翼布局
圣杯布局来源于文章In Search of the Holy Grail，而双飞翼布局来源于淘宝UED。虽然两者的实现方法略有差异，不过都遵循了以下要点：
- 两侧宽度固定，中间宽度自适应
- 中间部分在DOM结构上优先，以便先行渲染
- 允许三列中的任意一列成为最高列
- 只需要使用一个额外的
<div>标签
圣杯布局
1. DOM结构
<body>
<div id="header"></div>
<div id="container">
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
</div>
<div id="footer"></div>
</body>
2. CSS代码
* {
margin: 0;
padding: 0;
}
body {
min-width: 750px;
text-align: center;
}
#container {
padding-left: 200px;
padding-right: 150px;
}
#container .column {
float: left;
min-height: 150px;
}
#center {
width: 100%;
background: green;
}
#left {
width: 200px;
margin-left: -100%;
position: relative;
right: 200px;
background: orange;
}
#right {
width: 150px;
margin-right: -150px;
background: deepskyblue;
}
#header{
background: #dcdcdc;
padding: 20px;
}
#footer {
clear: both;
background: #dcdcdc;
}
Tips：在#center中，包含了一条声明width: 100%，这是中间栏能够做到自适应的关键。可能会有朋友认为不需要设置这条声明，因为觉得center在不设置宽度的情况下会默认将宽度设置为父元素(container)的100%宽度。但需要注意到，center是浮动元素，由于浮动具有包裹性，在不显式设置宽度的情况下会自动“收缩”到内容的尺寸大小。如果去掉width: 100%，则当中间栏不包含或者包含较少内容时，整个布局会“崩掉”，而达不到这样的效果
中间栏仅包含较少内容
双飞翼布局
1. DOM结构
<body>
<div id="header"></div>
<div id="container" class="column">
<div id="center"></div>
</div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
<div id="footer"></div>
<body>
双飞翼布局的DOM结构与圣杯布局的区别是用container仅包裹住center，另外将.column类从center移至container上。
2. CSS代码
* {
margin: 0;
padding: 0;
}
body {
min-width: 550px;
}
#container {
width: 100%;
}
.column {
float: left;
min-height: 150px;
}
#center {
margin-left: 200px;
margin-right: 150px;
background: red;
}
#left {
width: 200px;
margin-left: -100%;
background: yellow;
}
#right {
width: 150px;
margin-left: -150px;
background: blue;
}
#header {
background: #dcdcdc;
padding: 20px;
}
#footer {
clear: both;
padding: 40px;
background: #dcdcdc;
}
flex布局实现
1. DOM结构
<body>
<div id="header"></div>
<div id="container">
<div id="center"></div>
<div id="left"></div>
<div id="right"></div>
</div>
<div id="footer"></div>
</body>
与圣杯布局的DOM结构一样，但实现方法更简单
2. CSS代码
*{
margin: 0;
padding: 0;
}
body{
min-width: 550px;
}
#container {
display: flex;
}
#container>div{
min-height: 150px;
}
#center {
flex: 1;
background: red;
height: 100%;
}
/*order属性：定义对象的排列顺序，越小越靠前，默认为0*/
#left {
flex: 0 0 200px;
order: -1;
background: green;
height: 100%;
}
#right {
flex: 0 0 150px;
background: blue;
height: 100%;
}
原文作者：感谢!!! @放羊的小桃桃
网友评论