I_6

[noopn]

左边固定右边自适应

<style>
.container div {height: 400px;position: relative;}
#left {width: 200px;position: absolute;left: 0; top: 0;background: red;}
#right {position: absolute; left: 200px;right: 0;top: 0;background: blue; }
</style>
<div class="container">
  <div id="left"></div>
  <div id="right"></div>
</div>

<style>
.container {padding-left: 200px}
.container div {height: 400px;position: relative;}
#left {width: 200px;position: absolute;left: 0; background: red}
#right {overflow: hidden;background: blue;}
</style>
<div class="container">
  <div id="left">1</div>
  <div id="right">2</div>
</div>

<style>
.container {display: table;width: 100%;}
.container div {height: 400px;display: table-cell}
#left {background: red;width: 200px;}
#right {background: blue;}
</style>
<div class="container">
  <div id="left">1</div>
  <div id="right">2</div>
</div>

<style>
.container {display: flex;}
.container div {height: 400px;}
#left {background: red;width: 200px}
#right {background: blue;flex-grow: 1}
</style>
<div class="container">
  <div id="left">1</div>
  <div id="right">2</div>
</div>

使用css3 calc() 配合以上的方法，

左右固定中间自适应

1. 定位 同上
2. felx 同上

<style>
.container {min-width: 400px}
.container div {height: 400px;}
#left {background: red;float: left;width: 200px}
#right {background: blue;float: right;width: 200px}
#center{background: green;}
</style>
<div class="container">
  <div id="left">1</div>
  <div id="right">2</div>
  <div id='center'>center</div>
</div>