1.float+margin

效果如下：

html程式碼如下：

 <div class="main">im center</div>
 <div class="left">im left</div>
 <div class="right"> im right</div>

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程式碼：

 <div class="content">
    <div class="left">im left</div>
    <div class="main">im center</div>
    <div class="right"> im right</div>
  </div>

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程式碼：

 <div class="content">
    <div class="left">im left</div>
    <div class="main">im center</div>
    <div class="right"> im right</div>
 </div>

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的變化。

好啦，趕快動手去試試吧~~