如何实现如下的这种中间自适应宽度，左右两栏固定宽度布局？
这是一道经典的面试题，常用的方法是：圣杯布局、双飞翼布局。相信看完这篇文章，你就能很清楚的知道什么是圣杯和双飞翼了。
圣杯布局
首先，我们先定义HTML结构：
<div class='container'>
<div class="middle">中间的</div>
<div class="left">左边的</div>
<div class="right">右边的</div>
</div>
再来开始我们的布局，首先给这三个div都给一个float: left，让它们均左浮动。
.middle, .left, .right{
float: left;
}
接下来是最重要的两个步骤，设置左盒子的margin-left: -100%，把左盒子拉上来，调整左盒子的浮动位置到中间盒子的左侧。
再设置右盒子的margin-left: -右盒子宽度px，把右盒子拉上来，调整右盒子的浮动位置到中间盒子的右侧。
.left{
background: pink;
width: 300px;
height: 300px;
margin-left: -100%;
}
.right{
background: pink;
width: 300px;
height: 300px;
margin-left: -300px; //300px为右盒子的宽度
}
【*】此时的布局基本出来了，但是中间盒子的左右两侧会被左右两个盒子覆盖掉，此时我们要通过相对定位来避免覆盖。给左右盒子position: relative，再分别设置它们的left和right,并且控制父元素的padding来为左右两边留白。
.left{
position: relative;
left: -300px;
}
.right{
position: relative;
right: -300px;
}
.container{
border: 1px solid black;
height: 300px;
padding: 0 400px;
}
ok！大功告成，圣杯布局已经完成啦~
双飞翼布局
双飞翼的布局基本和圣杯布局类似，它的HTML结构为：
<div class='container'>
<div class="middle">
<div class="inner_middle">中间的</div>
</div>
<div class="left">左边的</div>
<div class="right">右边的</div>
</div>
前面的布局和圣杯完全一致，只是从【*】开始的这一步略微有些差异。
在双飞翼中避免左右盒子被覆盖，是通过设置inner_middle的左右margin来实现的。
.inner_middle{
margin: 0 300px;
}
另外，整个布局的左右padding留白也有些差异，直接设置父盒子的padding为左右留白的宽度就可以了。
.container{
border: 1px solid black;
height: 300px;
padding: 0 100px;
}
这里还有第二种实现方式，HTML结构沿用圣杯布局的结构，通过设置左右padding来避免中间盒子内容的覆盖。同时为了避免布局混乱，还有设置box-sizing: border-box，表示width包括border和padding，这样可以保证即使设置右左右padding，它的总宽度也是不变的。
.middle{
background: #ccc;
width: 100%;
height: 300px;
padding: 0 300px;
box-sizing: border-box;
}