圣杯布局其實(shí)是要實(shí)現(xiàn)一個三列布局，左右兩邊寬度固定，中間自適應(yīng)
圣杯布局實(shí)現(xiàn)步驟：
1.將中間內(nèi)容前置

<div class="container">
  <div class="middle">中間</div>
  <div class="left">左邊</div>
  <div class="right">右邊</div>
</div>

2.每個div設(shè)置一個浮動，中間寬度為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.實(shí)現(xiàn)上述兩個步驟后，中間內(nèi)容沾滿這個屏幕，這是因為中間內(nèi)容設(shè)置在前面，并且將左右兩邊的內(nèi)容擠下去了，
效果圖如下：

1.png

這個時候，設(shè)置左邊的{margin-left：-100%}，“100%”是中間內(nèi)容的寬度，右邊設(shè)置{margin-right：-200px}，“200px”是右邊的寬度
此時效果圖如下：

2.png

雖然左右兩列的內(nèi)容放到了合適的位置上，但是中間內(nèi)容被覆蓋了
4.針對上述問題，設(shè)置中間內(nèi)容的padding {padding：0 200px}，然后在設(shè)置相對定位和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;
    }