关于利用css 实现右侧固定 左侧自适应布局的解决方案

 最近遇到要求实现 右侧大小固定，左侧自适应的问题 ，根据亲身实现，现总结如下：

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;
  }

效果如图：