css实现左右两边宽度固定，中间自适应的布局效果

最终实现效果

实现方法1：通过浮动实现，代码如下

<div class="fa">
  <div class="left">111</div>
  <div class="right">333</div>
  <div class="center">222</div>
</div>

.fa{
  height: 500px;
}
.left{
  width: 200px;
  height: 100%;
  float: left;
  background:#ff0;
}
.center{
  margin:0 200px;
  height: 100%;
  background:#0f0;
}
.right{
  width: 200px;
  height: 100%;
  float: right;
  background-color: aliceblue;
}

实现方法2：通过grid实现，代码如下

<div class="fa">
    <div class="left">111</div>
    <div class="center">222</div>
    <div class="right">333</div>
  </div>

.fa{
  height: 500px;
  width: 100%;
  display: grid;
  grid-template-columns: 200px auto 200px; /*三列，第一三列200px,二列自适应*/
  grid-template-rows: 500px; /*行高*/
}
.left{
  background:#ff0;
}
.center{
  background:#0f0;
}
.right{
  background-color: aliceblue;
}

实现方法3：通过flex布局实现，代码如下

```html
<div class="fa">
    <div class="left">111</div>
    <div class="center">222</div>
    <div class="right">333</div>
  </div>

.fa{
  display: flex;
  width: 100%;
  height: 500px;
}
.left{
  background:#ff0;
  height: 100%;
  width: 200px;
  flex:0 0 200px;    /* 不放大 不缩小 固定宽度200px */
}
.center{
  background:#0f0;
  height: 100%;
  width: 200px;
  flex:1 1 auto;   /* 可放大 可缩小,自适应宽度 */
}
.right{
  background-color: aliceblue;
  height: 100%;
  width: 200px;
  flex:0 0 200px;
}

实现方法4：通过双飞翼布局实现，可以参考以下文章（不推荐）
双飞翼实现左右两边宽度固定，中间自适应的布局效果