css 經典佈局之聖盃佈局（左右固定，中間自適應）

css 聖盃佈局在國內又叫作雙飛翼佈局，這種佈局的特色是左右兩邊的寬度固定，中間的寬度自適應，同理也能夠實現左邊固定，右邊自適應，反之亦然。

注： 我不作 IE6 兼容已經不少年了。

第一種方式： 使用 margin

這種方式的原理是三個區塊都設置成左浮動，中間的區塊寬度 100%，調整左右區塊的 margin 實現三欄佈局。
html:

<div class="container">
  <div class="column main">
    <div class="main-wrap">main content</div>
  </div>
  <div class="column left">left</div>
  <div class="column right">right</div>
</div>

css:

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .container {
      margin: 0 auto;
    }
    /* clearfix */
    .container:after {
      clear: both;
      content: '\0020';
      height: 0;
      display: block;
    }
    .column {
      float: left;
      position: relative;
    }
    .left {
      background: #666;
      width: 150px;
      min-height: 400px;
      margin-left: -100%;
    }
    .main {
      width: 100%;
      background: #333;
      min-height: 400px;
    }
    .main-wrap {
      margin: 0 200px 0 150px;
      min-height: 400px;
    }
    .right {
      width: 200px;
      background: #999;
      min-height: 400px;
      margin-left: -200px;
    }

第二種方式： 使用絕對定位

 這種方式的原理是父容器設置寬度 100% ，左右內邊距（padding）爲左右區塊的寬度，左區塊設置 margin-left 爲自身寬度，右區塊使用絕對定位將其定位到右上。

html:

<div class="container">
  <div class="left">left</div>
  <div class="main">main</div>
  <div class="right">right</div>
</div>

css:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  max-width: 1200px;
  padding: 0 200px 0 150px;
  margin: 0 auto;
  position: relative;
}
.left {
  background: #666;
  float: left;
  width: 150px;
  margin-left: -150px;
  min-height: 400px;
}
.main {
  width: 100%;
  background: #333;
  min-height: 400px;
}
.right {
  width: 200px;
  background: #999;
  min-height: 400px;
  position: absolute;
  top: 0;
  right: 0;
}