实现一个三列布局(左右侧固定，中间自适应宽度)

html代码(第一二种方法):

<div class="left">左侧固定区</div>
<div class="right">右侧固定区</div>
<div class="mid">中间自适应区</div>

 

css代码：

第一种方法（定位）：

.left {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 200px;
  background-color: red;
 }

 .mid {
  margin-left: 100px;
  margin-right: 200px;
  height: 200px;
  background-color: blue;
 }

 .right {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 200px;
  background-color: yellow;
 }

 

第二种方法（浮动）：

.left {
 float: left;
 width: 100px;
 height: 200px;
 background-color: red;
}

.mid {
 height: 200px;
 background-color: blue;
}

.right {
 float: right;
 width: 200px;
 height: 200px;
 background-color: yellow;
}

 

第三种方法（负边距）：

html代码：

<div class="center fl">
  <div class="mid">
     中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区
  </div>
</div>

<div class="left fl">左边固定区</div>

<div class="right fl">右边固定区</div>

 

css代码：

.fl { float: left; }

.center {
  width: 100%;
  height: 200px;
  background: yellow;
}
  .center .mid{
    margin-right: 100px;
    padding: 0 110px;
  }

.left{
    margin-left: -100%;
    width: 100px;
    height: 200px;
    background: green;
}

.right{
    margin-left: -200px;
    width: 200px;
    height: 200px;
    background: blue;
}