什么是三栏布局？
三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局。
三栏布局
实现方法1. 利用浮动
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</div>
注意：中间的自适应div要放在最后写。
.wrapper{
width: 700px;
height: 400px;
margin: 0 auto;
}
.wrapper .left{
width: 200px;
height: 400px;
background-color: blueviolet;
float: left;
}
.wrapper .right{
width: 200px;
height: 400px;
background-color: deepskyblue;
float: right;
}
.wrapper .middle{
height: 400px;
background-color: darksalmon;
}
此方法使得中间栏总是最后渲染。
想要优先渲染中间栏，可以用到下面的方法。
方法2. 绝对定位布局
<div class="wrapper">
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>
</div>
.wrapper{
width: 700px;
height: 400px;
margin: 0 auto;
position: relative;
}
.wrapper .left{
width: 200px;
height: 400px;
background-color: blueviolet;
position: absolute;
left: 0;
}
.wrapper .middle{
position: absolute;
left: 200px;
right: 200px;
height: 400px;
background-color: darksalmon;
}
.wrapper .right{
width: 200px;
height: 400px;
background-color: deepskyblue;
position: absolute;
right: 0;
}
方法3.flex布局
html同上
.wrapper{
width: 700px;
height: 400px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.wrapper .left{
width: 200px;
order: 1;
background-color: blueviolet;
}
.wrapper .middle{
order: 2;
flex:1;
background-color: darksalmon;
}
.wrapper .right{
width: 200px;
order: 3;
background-color: deepskyblue;
}
圣杯布局
圣杯布局就是一种优先渲染中间内容的布局。
html：
<div class="wrapper">
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>
</div>
css:
a. 假设我们规定左侧的固定宽度为200px，右侧的固定宽度为300px。
.wrapper{
width: 700px;
height: 400px;
padding: 0 300px 0 200px;
margin: 0 auto;
}
得到以下效果
b. 之后我们就要进行中间三列的宽度的设置，同时进行浮动的设置（将中间三列进行左浮动），并且进行高度的设置和定位。
.middle,.left,.right{
float: left;
position: relative;
height: 400px;
}
c. 我们要在.middle的部分进行 width：100%占满。
.middle{
width: 100%;
background-color: blanchedalmond;
}
d. 此时我们看到.middle占满了，所以我们现在需要做的就是将.left拉到最左边，我们就要进行margin-left:-100%,得到下图效果。
e. 在这个时候我们可以看到，虽然我们将.left拉到了左边，但是他将中间部分的内容覆盖掉了，所以我们就要使用相对定位left:-200px。
同理我们也要对.right进行绝对定位.right:-300px
.left{
width: 200px;
margin-left: -100%;
left: -200px;
background-color: cornflowerblue;
}
.right{
width: 300px;
margin-left: -300px;
right: -300px;
background-color: darkslateblue;
}
这样就完成了三栏布局！
圣杯布局
完整css代码：
.wrapper{
width: 700px;
height: 400px;
padding: 0 300px 0 200px;
margin: 0 auto;
}
.middle,.left,.right{
float: left;
position: relative;
height: 400px;
}
.middle{
width: 100%;
background-color: blanchedalmond;
}
.left{
width: 200px;
margin-left: -100%;
left: -200px;
background-color: cornflowerblue;
}
.right{
width: 300px;
margin-left: -300px;
right: -300px;
background-color: darkslateblue;
}
双飞翼布局
双飞翼布局其实和圣杯布局类似，都是为了实现三栏布局，且中间内容部分优先展示
不同点就是圣杯布局利用的是 wrapper 的 padding 来保留左右位置的，而双飞翼布局利用的是给中间部分（middle）的 margin 来实现的，因为它是在 middle 的外面再次嵌套了一层 div（middle-wrapper）
html
<div class="wrapper">
<div class="middle-wrapper">
<div class="middle"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
- 在wrapper 的三列 center-wrapper、left、right分别设置左浮动
- middler-wrapper 的宽度设置为 100%，left 和 right 的宽度分别设置为 200px、300px ，对 left 设置 margin-left：-100%，使其回到上一行的最左边
- 对 right 使用 margin-left：-300px，使其回到上一行的最右边，此时就大功告成
css
.wrapper{
width: 1000px;
height: 400px;
margin: 0 auto;
}
.middle-wrapper,.left,.right{
float: left;
height: 400px;
}
.middle-wrapper{
width: 100%;
background-color: darksalmon;
}
.left{
width: 200px;
margin-left: -100%;
background-color: goldenrod;
}
.right{
width: 300px;
margin-left: -300px;
background-color: darkseagreen;
}
