25. css布局 圣杯 双飞翼

到这里，是不是感觉很有成就感？但是很遗憾的告诉你，还没结束哦！
我们现在的确是硬性的实现了固比固布局。但是要记住，中间盒子是自适应的宽度，所以中间盒子里的内容会被左右盒子给压住一部分。
比如现在我给中间盒子加很多的内容，大家看看效果图：

中间盒子的内容被盖住

所以，我们的工作还没停止。

第六步：让中间自适应的盒子安全显示

首先:利用父级元素设置左右内边距的值，把父级的三个子盒子往中间挤。

代码如下：.container{ padding: 0 200px;} 这里的200px是左右盒子的宽度。
效果如下：

利用父级的内边距将盒子往中间挤

我们可以看到，左右两边的内边距是有了，但是中间盒子上的内容还是被压着。

其次:给左右两个盒子加一个定位，加了定位之后左右两个盒子就可以设置left和right值。

代码如下：
.left{ position: relative; left: -200px;}
.right{position: relative;right: -210px;

第七步：看最终效果图

圣杯布局大功告成啦！

作者：森西悠然
链接：https://www.jianshu.com/p/f9bcddb0e8b4
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。