两种方式实现圣杯布局

<!-- 圣杯布局，它们实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应 -->

1.flex实现

具体教程可以参考学习阮一峰的博客：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html点击打开链接

HTML代码

<div class="body">
    <div class="left"></div>
    <div class="content"></div>
    <div class="right"></div>
  </div>

css代码

<style type="text/css">
    .body {
    display: flex;
  }
  .left,.right {
    /*左右两列定宽200px*/
    flex:0 0 200px;
    height: 500px;
    background-color: gray;
  }
  .content {
    flex:1;
    height: 500px;
    background-color: red;
  }
</style>

2.通过css盒子的负边距属性实现

HTML代码与上面一样,关于负边距的理解与应用可以参考该博客：

https://www.cnblogs.com/2050/archive/2012/08/13/2636467.html  点击打开链接

HTML代码

  <div class="body">
    <div class="content"><h2>中间内容</h2></div>
    <div class="left"><h2>左边栏</h2></div>
    <div class="right"><h2>右边栏</h2></div>
  </div>

css代码如下：

  /****2.正常css实现*/
  .content {
    width: 100%;
    height: 500px;
    float: left;
  }
  .left {
    width: 200px;
    height: 500px;
    float: left;
    position: relative;
    margin-left: -100%;
    background-color: yellow;
  }
  .right {
    width: 200px;
    height: 500px;
    float: left;
    position: relative;
    margin-left: -200px;
    background-color: blue;
  }