2019独角兽企业重金招聘Python工程师标准>>> 
事实上，圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应，也就是我们常说的固比固布局。它们实现的效果是一样的，差别在于其实现的思想。
<!DOCTYPE html>
<html><head><title>shengbeibuju</title><meta charset="utf-8"><style type="text/css">body {margin: 0px;padding: 0px;}header {width: 100%;height: 40px;background-color: darkseagreen;}.container {background-color: gray;overflow: hidden;padding:0 200px;}/******重点start******/.middle {width: 100%;background-color: green;height: 200px;float: left;}.left {float: left;width: 200px;height: 200px;background-color: yellow;margin-left: -100%;/*重点*/position: relative;/*重点*/left:-200px;/*重点*/}.right {float: left;width: 200px;height: 200px;background-color: pink;margin-left: -200px;/*重点*/position: relative;/*重点*/right: -200px;/*重点*/}/*********重点end**********/.footer {width: 100%px;height:100px;background-color: darkslategray;}</style>
</head><body><header><h2>header内容区域</h2></header><div class="container"><div class="middle"><h2>中间弹性区</h2>太热了，非洲留学生说要回家避暑】一段非洲留学生要回家避暑视频走红。他叫King Fazz，来自非洲加纳，在@西南科技大学 读研。当天他和同学练完足球，热得受不了就录下视频：“太热了，我要回非洲避暑。”他的家乡加纳只有20多度。</div><div class="left"><h2>左侧固定</h2></div><div class="right"><h2>右侧固定</h2></div></div><div class="footer"></div>
</body></html>
