三列布局（浮動和負邊距）

• 浮動大概思路是將前兩個元素分別向左，向右浮動， 而後第三個天然就上來了。

  <div class="a"></div>
  <div class="c"></div>
  <div class="b"></div>
  
  .a{
     float:left;
     width:50px;
     height:70px;
     background:orange;
  }
  .c{
     float:right;
     width:50px;
     height:70px;
     background:blue;
  }
  .b{
     height:70px;
     background:red;
  }

   

• 負邊距。也須要用到浮動。

   1 <div class="wrap">
   2         <div class="main">cc</div>
   3 </div>
   4 <div class="left">vvv</div>
   5 <div class="right">bbbb</div>
   6 
   7 .wrap{
   8     float:left;
   9     width:100px;//隨屏幕寬度變化    
  10 }
  11 
  12 .main{
  13     background:red;
  14     margin-left:aaa;//aaa表示左邊元素留出來的寬度。
  15     margin-right:bbb;//bbb表示給右邊元素留出來的的寬度。
  16 }
  17 
  18 .left{
  19     width:aaa;
  20     float:left;
  21     background:green;
  22     margin-left:-100%;//設爲-100%能夠上移一行。
  23 }
  24 .right{
  25     float:left;
  26     width:bbb;
  27     background:blue;
  28     margin-left:-bbb;  //設置和自身寬度同樣的負邊距，恰好把本身移上去。
  29 }

  神馬雙飛翼佈局就是按着來的。