经典三栏布局之圣杯、双飞翼、弹性布局
圣杯布局和双飞翼布局是前端工程师须要掌握的布局方式，二者功能相同，都是为了实现两侧宽度固定，中间宽度自适应的布局方式，此外，使用新增的flex布局，可使布局更加简单。css
双飞翼布局和圣杯布局虽然实现方式有所差别，可是基本上都遵循了如下几点：前端
-
两侧宽度固定，中间宽度自适应前端工程师
-
中间结构在DOM上优先，以便于优先渲染框架
下面依次介绍圣杯布局、双飞翼布局、弹性布局实现三栏布局布局
圣杯布局
1、搭建主体结构
咱们先搭建主体框架，将主体结构写出来flex
<div class="header"></div> <div class="container"></div> <div class="footer"></div>
咱们将为左右预留出必定的空间，做为左右固定两栏的位置spa
.container{
padding-left:200px;
padding-right:150px;
}
这时，咱们的主体结构变成这样了
2、添加中、左、右三列
接下来咱们将左、中、右三列添加到主体框架中3d
<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>
注：注意container内三栏的前后顺序，center写在最前面code
随后给三列设置宽度和浮动，而后给footer添加清除浮动blog
#container .column {
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px;
}
#right {
width: 150px;
}
#footer {
clear: both;
}
注：此时为center添加的100%宽度，是父元素的内容宽度，由于父元素有左右padding，因此center的宽度只是中间栏的宽度
且因为center占据了内容宽度的100%，因此致使左右列被换行。获得如下效果：
3、移动left块
因为center，宽度的影响，致使left和right被挤到下一行，这里咱们能够将它们看做在同一行，为left添加负外边距。
#left {
width: 200px;
margin-left: -100%;
}
注：这里的-100%是指父元素内容宽度的100%,因此，left会移动到最左侧，以下图示
随后咱们为每一个块添加相对定位，并使left相对本身偏移200px，正好能够覆盖center的padding值。
#container .columns {
float: left;
position: relative;
}
#left {
width: 200px;
margin-left: -100%;
right: 200px;
}
四、移动right块
接下来咱们将right块移到右边，咱们依旧能够将其看做和center同行。这里依旧采用负外边距。
#right {
width: 150px;
margin-right: -150px;
}
如今，圣杯布局就已经彻底成功了。
虽然咱们已经将圣杯布局成功的写了出来，可是要考虑到，当页面缩小时如何保证页面的正确显示？这就涉及到了最小宽度，但并非简单的left+right = 350px;仔细想想，此前咱们对left设置了相对定位。因此left的200px存在于center上，因此最小宽度为200+150+200 = 550px;所以，再添上下面这段代码：
body {
min-width: 550px;
}
总体布局css为：
body {
min-width: 550px;
}
#container {
padding-left: 200px;
padding-right: 150px;
}
#container .column {
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px;
margin-left: -100%;
position: relative;
right: 200px;
}
#right {
width: 150px;
margin-right: -150px;
}
#footer {
clear: both;
}
双飞翼布局
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>
添加css代码
#container {
width: 100%;
}
.column {
float: left;
}
#center {
margin-left: 200px;
margin-right: 150px;
}
#left {
width: 200px;
}
#right {
width: 150px;
}
#footer {
clear: both;
}#container {
width: 100%;
}
.column {
float: left;
}
双飞翼布局的DOM结构与圣杯布局的区别是用container仅包裹住center，另外将.column类从center移至container上。将获得以下所示的效果
以上代码将container,left,right设置为float: left，而在container内部，center因为没有设置浮动，因此其宽度默认为container的100%宽度，经过对其设置margin-left和margin-right为左右两列预留出了空间。
2、移动left块
将left放置到预留位置：
#left {
width: 200px;
margin-left: -100%;
}
如图：
3、移动right块
#right {
width: 150px;
margin-left: -150px;
}
如图：
最后计算最小页面宽度，咱们最好把宽度留大一些。
body {
min-width: 500px;
}
总体代码布局css为：
body {
min-width: 500px;
}
#container {
width: 100%;
}
.column {
float: left;
}
#center {
margin-left: 200px;
margin-right: 150px;
}
#left {
width: 200px;
margin-left: -100%;
}
#right {
width: 150px;
margin-left: -150px;
}
#footer {
clear: both;
}
Flex弹性三栏布局
1、搭建DOM结构
搭建主体结构
<div class="container"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div>
添加flex弹性盒子
.container {
display: inline-flex;
flex-direction: row;
width: 100%;
}
.left {
width: 200px;
}
.center {
flex: 1;
width: 100%;
}
.right {
height: 300px;
width: 150px;
background: rgb(252, 78, 39);
}
记得必定要给center块添加flex:1，这是必要的，不然将没法实现两边固定，中间弹性的布局
如图
-
每一个你不满意的现在，都有一个你没有努力的曾经。