最近遇到要求實現 右側大小固定，左側自適應的問題 ，根據親身實現，現總結如下：

1.我們首先看一下左邊固定 右邊自適應的情況

  html ：  <div id="left">  我在左邊</div>
         <div id="right">  我在右邊</div>

 css :   #left{     border:1px solid #000;
                            float:left;
                            width:500px;
                        }
                 #right{
               border:1px solid #f00;
              margin-left:600px;
                           } 

         效果如下：

此時左邊大小固定，右邊水平自適應左邊 中間距離適中為100px; 

如果 用同樣的方式進行右邊固定左邊自適應行嗎？

css:#left{
border:solid 1px red;
      }
#right{
width:500px;
border:solid 1px green;
float:right;
}
 效果如下：

顯然不行 ，這是因為 左邊的在前面，會擋住後面的塊，佔據了一行，

但是如果兩邊都用了float呢？

效果如下：

顯然是不行的，這樣就不能實現自適應了。

那我們應該怎樣做呢？

第一種方案：

 html ：   <div id="right">  我在右邊</div>

         <div id="left">  我在左邊</div>     

 css :  #left{
         border:1px solid #000;
margin-right:600px;
}
#right{
border:1px solid #f00;
float:right;
width:500px;}

把前後位置順序顛倒，也可以實現右側固定 左側 自適應

第二種方案

   利用css3 中的 cal()可以實現， 讓瀏覽器自動計算 右邊的大小；

 html： <div id="left">  我在左邊</div>
         <div id="right">  我在右邊</div>

css: #left{
border:1px solid #000;
width: calc(100% - 600px);
float: left;
}
#right{
       float: right;
width: 500px;
  border:1px solid #000;
  }

效果如圖：