[分享]css两列固定中间自适应

<div class="wrapper">
  <div class="left"></div>
  <div class="right"></div>
  <div class="center"></div>
</div> 

接着，我们需要为这个结构添加CSS样式。我们首先给wrapper元素设置一个相对定位，这样我们可以让左侧、右侧和中间的元素绝对定位到wrapper内。我们给左侧和右侧分别设置左侧和右侧的位置，以及固定宽度。接着，我们给中间元素设置左侧和右侧的位置，以及100%的宽度，表示他会填满剩余的宽度。

.wrapper {
  position: relative;
}

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

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

.center {
  position: absolute;
  left: 200px;
  right: 200px;
  top: 0;
  bottom: 0;
  background-color: #eee;
} 

最后，我们就可以拥有一个两列固定中间自适应的布局了。我们可以尝试在浏览器中改变文档宽度，看看中间的区域是如何自适应的。

这就是使用CSS实现两列固定中间自适应的方法。我们可以利用这个方法来实现各种网页设计中的布局需求，例如三列布局中的两侧固定一侧自适应等等。