三种方式实现：三栏布局（圣杯布局，双飞翼布局前端面试的布局问题）

1.float+margin

效果如下：

html代码如下：

 
im center
 
im left
 
 im right

css代码如下：

 *{
        padding: 0px;
        margin:0px;
    }
    .left{
        width:200px;
        height: 400px;
        background-color: bisque;
        float:left;
        margin-left: -100%;
        text-align: center;
    }
    .right{
        width:200px;
        height: 400px;
        background-color: bisque;
        float:left;
        margin-left: -200px;
        text-align: center;
    }
    .main{
        width: 100%;
        height: 400px;
        float: left;
        box-sizing: border-box;
        padding: 0 200px;//文字不被覆盖
        background-color: cadetblue;
        text-align: center;
    }

2.flex（woo~so easy right?）

html代码：

 

    
im left
    
im center
    
 im right
  

css代码：

 *{
        padding: 0px;
        margin:0px;
    }
    .content{
        width: 100%;
        height:300px;
        display: flex;
    }
   .left{
        background-color: bisque;
        width: 200px;
   }
   .right{
       background-color:bisque;
       width: 200px;
   }
   .main{
       flex: 1;
       background-color: cadetblue;
   }

3.position:absolute+z-index

html代码：

 

    
im left
    
im center
    
 im right
 

css代码：

 *{
        padding: 0px;
        margin:0px;
    }
    .content{
        width: 100%;
        height:300px;
    }
    .left{
        width: 200px;
        height: inherit;
        position: absolute;
        z-index: 1;
        background: bisque;
    }
    .main{
        width: 100%;
        height: inherit;
        background: cadetblue;
        position: relative;
        box-sizing: border-box;
        padding: 0 200px;
    }
    .right{
        width: 200px;
        height: inherit;
        background: bisque;
        position: absolute;
        top:0;
        right:0;
        z-index: 1;
    }

综合而言主要是这三种形式，当然也有更多的方法，主要是在div的排列顺序和position与float的变化。

好啦，赶快动手去试试吧~~