方法一：绝对定位

左侧栏和右侧栏分别用绝对定位固定在左侧和右侧，中间栏则利用margin-left和margin-right空出左右栏位置来：

    .middle { 
        height: 400px;
        margin-left: 100px;
        margin-right: 100px;
        background-color: green;
    } 
    .left { 
         position: absolute;
         width: 100px; 
         height: 300px; 
         left: 0; 
         top: 0; 
         background-color: red;
    } 
    .right { 
        position: absolute;
        width: 100px;
        height: 300px;
        background-color: blue; 
        right: 0; 
        top: 0; 
    }
 <div class="container">
      <div class="middle"></div>
      <div class="left"></div> 
      <div class="right"></div> 
</div>

方法二：浮动定位法（流式布局）

此种方法最简单，分别令左侧栏和右侧栏向左和向右浮动，中间栏放在最后，再利用左右外边距空出左右栏的位置即可。

    .left{
        width: 100px;
        height: 300px;
        background-color: blue;
        float: left;
    }
    .right{
        width: 200px;
        height: 300px;
        background-color: red;
        float: right;
    }
    .middle{
        margin-left: 100px;
        margin-right: 200px;
        height: 300px;
        background: green;
    }
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle"></div>

方法三：双飞翼布局（浮动+负外边距）

与两栏布局中的方法二中-100%外边距的使用有异曲同工之妙，注意理解。
三个栏都采用左浮动；中间栏的div写在最前面，宽度为100%
左侧栏也是左浮动，默认情况下由于前面的中间栏div占据了100%，因此这个左侧栏是在中间栏下方一行的。为左侧栏设置margin-left:-100%，即整个屏幕的宽度100%，这就令左侧栏跑到了中间栏的最左侧。
右侧栏也是左浮动，此时默认情况下也是在中间栏下方一行的，同样利用margin-left:-300px，即其自身的宽度，使其到上一行最右侧的位置。
中间栏的内容部分则需要利用分别等于左右侧栏宽度的外边距来空出它们的位置。

    .middle{
        float: left;
        width:100%;
        height: 300px;
        background-color: red;
    }
    /*建立子盒子，偏移预留空间*/
    .middle-inner{
        margin-left: 100px;
        margin-right: 200px;
        background-color: green;
        height: 300px;
    }
    .left{
        float: left;
        width: 100px;
        height: 300px;
        background-color: blue;
        margin-left: -100%;
    }
    .right{
        float: left;
        width: 200px;
        height: 300px;
        background-color: yellow;
        margin-left: -200px;
    }
<div class="middle">
     <div class="middle-inner">中间弹性区</div>
</div>
<div class="left">左边栏</div>
<div class="right">右边栏</div>

方法四：圣杯布局

圣杯布局是一种相对布局，和双飞翼布局有些相似，不同之处是，这两种方法实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应，它们实现的效果是一样的。双飞翼布局中间盒子放在另一个盒子里面（或是不放）左右两侧盒子是直接放到外面，在通过设置负边距移动到上方左右两侧。圣杯布局是三个同级盒子放到一个盒子里面，这个盒子事先留出左右两边的空间，然后左右两个盒子除了设置负边距，两个盒子再设置对应的 position:relative属性，left，right偏移到已经预留出来的空间中。

.container{
        margin-left: 120px;
        margin-right: 220px;
    }
    .middle{
        float:left;
        width: 100%;
        height: 300px;
        background-color: red;
    }
    .left{
        float:left;
        width: 100px;
        height: 300px;
        background-color: blue;
        margin-left: -100%;  /*把左边的盒子拉上去*/
        position: relative;
        left: -100px;
    }

    .right{
        float:right;
        width: 200px;
        height: 300px;
        background-color: green;
        margin-left:-220px;
        /*中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置*/
        position:relative;
        right:-200px;
    }
    <div class="container">
    <div class="middle">中部</div>
    <div class="left">左部</div>
    <div class="right">右部</div>
</div>

方法五：flexbox

原理是父元素添加display:flex成为弹性盒模型，里面的三个元素成为弹性盒子的项目，给每一个元素设置flex:1,这是最简单的方法，flex:1是flex-grow: 1;flex-shrink: 1;flex-basis: 0%;缩写，前两个代表项目的放大缩小，flex-basis是定义了在分配多余空间之前，项目占据的主轴空间。为0%所以没有设置，所以最终三个项目等分父元素空间，也可以给flex-basis指定固定宽度或是百分比，实现自定义宽度的效果。

    .container{
        display: flex;
    }
    .middle{
        flex: 1;
        height: 300px;
        background-color: red;
    }
    .left{
        flex: 1;
        /*flex: 0 1 100px;*/
        height: 300px;
        background-color: blue;
    }
    .right{
        /* flex: 0 1 200px; */
        flex: 1;
        height: 300px;
        background-color: green;
    }

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