实现三栏布局中间自适应（二）

margin负值法：实现三栏布局中间自适应。废话不说上代码：
此处是css代码

                   *{
                       margin:0;
                       padding:0;
                    }       
                   .main{
                       width:100%;
                       height:500px;
                       float:left;
                   }
                   .main .body{
                      margin:0 200px;
                      background:blue;
                      height:500px;
                   } 
                   .left,.right{
                       width:200px;
                       height:500px;
                     float:left;
                       background:red;
                   }
                  .left{
                      margin-left:-100%;
                  }
                  .right{
                      margin-left:-200px;
                  }                                 

附上HTML代码

            <div class="main">
                     <div class="body">中</div>
            </div>
            <div class="left">左</div>
            <div class="right">右</div> 

此处的html代码顺序是要固定的。上图应该更好理解吧~

还有大家耳熟能详的一个方法：自身浮动法，这个也是最好理解的了，图就不上了，直接上代码

*{
     margin:0;
     padding:0;
}
.main{
    margin:0 200px;
    background:#66ff33;
}
.left,.right{
     width:200px;
     height:500px;
     background:#9900ff;
}
.left{
    float:left;
}
.right{
    float:right;
}

html的：

    <div class="left">左</div>
    <div class="right">右</div> 
    <div class="main">中</div>

当然这种方法不能调main的位置，不然它就会将其他的div挤下来。原因嘛，当然是因为main没有设置浮动，它还是个块元素，独自霸占一行。。。就酱。还有别的方法再说，先总结。