左边固定定位 右边自适应

一侧自适应样式在工作中经常遇到，整理下目前知道的解决方法：

基本样式：

 

div{line-height:30px;text-align:center;}
.fl{background-color:#ff0;}
.fr{background-color:#f0f;}

 

<div class=div>
  <div class="fl">left</div>
  <div class="fr">right</div>
</div>

 

第一种方法：

 

.div1 .fl{float:left;width:200px;}
.div1 .fr{overflow:hidden;}

 

第二种方法：

 

.fl{float:left;width:200px;}
.fr{ margin-left:200px;}

 

第三种方法：

 .fl{position:absolute;top:0;left:0;width:200px;}
 .fr{margin-left:200px;}

第四种方法：

 

.fl{position:absolute;top:0;left:0; width:200px;}
.fr{position:absolute;top:0;left:200px;right:0;}

 

第五种方法：

 

.div{position:relative;padding-left:200px;}
.fl{ position:absolute;width:200px;top:0;left:0;}

 

显示效果：