SOURCE

console 命令行工具 X clear

                    
>
console
第一种方法:margin-left
<div class="wrapper1">
  <div class="left1">固定left</div>
  <div class="right1">自适应right</div>
</div>
第二种方法:overflow:auto
<div class="wrapper2">
  <div class="left2">固定left</div>
  <div class="right2">自适应right</div>
</div>
第三种方法:display:table
<div class="wrapper3">
  <div class="left3">固定left</div>
  <div class="right3">自适应right</div>
</div>
第四种方法:calc()
<div class="wrapper4">
  <div class="left4">固定left</div>
  <div class="right4">自适应right</div>
</div>
/* 第一种方法 */
.left1{
  width:100px;
  background:red;
  height:80px;
  float:left;
}
.right1{
  margin-left:100px;
  background:yellow;
  height:80px;
}
/* 第二种方法 */
.left2{
  width:100px;
  background:red;
  height:80px;
  float:left;
}
.right2{
  background:yellow;
  height:80px;
  overflow:auto;
}
/* 第三种方法 */
.wrapper3{
  display:table;
  width:100%;
}
.left3{
  width:100px;
  background:red;
  height:80px;
  display:table-cell;
}
.right3{
  background:yellow;
  height:80px;
  display:table-cell;
}
/* 第四种方法 */
.wrapper4{
  width:100%;
}
.left4{
  width:100px;
  background:red;
  height:80px;
  float:left;
}
.right4{
  background:yellow;
  height:80px;
  float:left;
  width:calc(100% - 100px);
}