圣杯布局的实现

圣杯布局其实是要实现一个三列布局，左右两边宽度固定，中间自适应
圣杯布局实现步骤：
1.将中间内容前置

<div class="container">
  <div class="middle">中间</div>
  <div class="left">左边</div>
  <div class="right">右边</div>
</div>

2.每个div设置一个浮动，中间宽度为100%,左右宽度固定

 .container{
      height: 200px;
      overflow: hidden;
    }
    .container>div{
      float: left;
    }
    .middle{
      width: 100%;
      background-color: #ff5555;
    }
    .left{
      width: 200px;
      background-color: green;
    }
    .right{
      width: 200px;
      background-color: blue;
    }

3.实现上述两个步骤后，中间内容沾满这个屏幕，这是因为中间内容设置在前面，并且将左右两边的内容挤下去了，
效果图如下：

1.png

这个时候，设置左边的{margin-left：-100%}，“100%”是中间内容的宽度，右边设置{margin-right：-200px}，“200px”是右边的宽度
此时效果图如下：

2.png

虽然左右两列的内容放到了合适的位置上，但是中间内容被覆盖了
4.针对上述问题，设置中间内容的padding {padding：0 200px}，然后在设置相对定位和left .left{position:relative，left：-200px} .right{position:right,right:-200px}
最终效果图如下：

3.png

完整css代码如下：

.container{
      height: 200px;
      overflow: hidden;
      padding: 0 200px;
    }
    .container>div{
      float: left;
    }
    .middle{
      width: 100%;
      background-color: #ff5555;

    }
    .left{
      width: 200px;
      background-color: green;
      margin-left: -100%;
      position: relative;
      left: -200px;
    }
    .right{
      width: 200px;
      background-color: blue;
      margin-left:-200px ;
      position: relative;
      right: -200px;
    }