CSS 三列布局（三栏布局）

传统三列布局：左右定宽，中间自适应
1.绝对定位+外边距实现：左右盒子绝对定位，固定于页面左右两侧；中间盒子的 margin-left,margin-right 分别等于左右两个盒子的宽度。

/*CSS*/
  * {
    margin: 0;
    padding: 0;
    font-size: 50px;
    text-align: center;
  }

  #left {
    height: 500px;
    width: 200px;
    background-color: red;
    font-size: 50px;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
  }

  #middle {
    height: 600px;
    background-color: purple;
    font-size: 50px;
    text-align: center;
    margin: 0 300px 0 200px;
  }

  #right {
    height: 400px;
    width: 300px;
    background-color: blue;
    font-size: 50px;
    text-align: center;
    position: absolute;
    top: 0;
    right: 0;
  }

2.浮动+外边距实现：左右盒子浮动到页面两侧，中间盒子的 margin-left,margin-right 分别等于左右两个盒子的宽度。
注意：因为浮动会影响后面的盒子，所以中间的盒子要最后渲染

<div id='left'>leftdiv>
<div id='right'>rightdiv>
<div id='middle'>middlediv>

/*CSS*/
  * {
    margin: 0;
    padding: 0;
    font-size: 50px;
    text-align: center;
  }

  #left {
    height: 500px;
    width: 200px;
    background-color: red;
    font-size: 50px;
    text-align: center;
    float: left;
  }

  #middle {
    height: 600px;
    background-color: purple;
    font-size: 50px;
    text-align: center;
    margin: 0 300px 0 200px;
  }

  #right {
    height: 400px;
    width: 300px;
    background-color: blue;
    font-size: 50px;
    text-align: center;
    float: right;
  }

3.浮动+overflow:hidden实现：只需把上一方法"浮动+外边距"中的margin: 0 300px 0 200px;改为 overflow: hidden;

4.flex布局：中间项设置flex:1，表示占据所有剩余空间。

/*CSS*/
  * {
    margin: 0;
    padding: 0;
    font-size: 50px;
    text-align: center;
  }

  section {
    display: flex;
    background: pink;
  }

  section div:nth-child(1) {
    width: 200px;
    height: 400px;
    background-color: red;
  }

  section div:nth-child(2) {
    /*flex 表示占剩余空间的份数*/
    flex: 1;
    background-color: green;
  }

  section div:nth-child(3) {
    width: 300px;
    height: 400px;
    background-color: yellow;
  }

5.圣杯布局

/*CSS*/
* {
    margin: 0;
    padding: 0;
    font-size: 50px;
    text-align: center;
  }

  section {
    /*留出左右两个盒子的宽度*/
    padding: 0 600px 0 300px;
    height: 500px;
  }

  /*第一个盒子是middle*/
  section div:nth-child(1) {
    float: left;
    width: 100%;
    height: 500px;
    background-color: yellow;
  }

  /*左边盒子*/
  section div:nth-child(2) {
    float: left;
    width: 300px;
    /*左外边距等于外层容器宽度的负值*/
    margin-left: -100%;
    height: 500px;
    background-color: red;
    position: relative;
    /*相对定位再往左拉回自身的宽度*/
    left: -300px;
  }

  /*右边盒子*/
  section div:nth-child(3) {
    float: left;
    width: 600px;
    height: 500px;
     /*左外边距等于自身宽度的负值*/
    margin-left: -600px;
    background-color: green;
    position: relative;
    /*相对定位再往右拉回自身的宽度*/
    right: -600px;
  }