css 两边固定中间自适应布局的实现

下面是CSS两边固定中间自适应布局的实现攻略：

1. 使用flex布局实现

Flex布局可以很方便地实现两边固定，中间自适应的布局效果。

示例代码：

<div class="container">
  <div class="left"></div>
  <div class="main"></div>
  <div class="right"></div>
</div>

.container {
  display: flex;
  justify-content: space-between;
}

.left,
.right {
  width: 200px;
  height: 300px;
}

.main {
  flex: 1;
  height: 300px;
}

上述代码中，使用了 Flex 布局，通过在容器中设置display:flex，再使用justify-content: space-between设置左右两侧的元素靠边排列。而主要内容使用了flex:1，使其自适应剩余的空间，从而实现了左右两侧固定，中间自适应的布局效果。

2. 使用float布局实现

除了Flex布局外，也可以使用浮动来实现两边固定，中间自适应的布局效果。

示例代码：

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
  <div class="main"></div>
</div>

.container:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.left,
.right {
  float: left;
  width: 200px;
  height: 300px;
}

.right {
  float: right;
}

.main {
  margin: 0 200px;
  height: 300px;
}

上述代码中，通过给左侧和右侧元素分别设置float:left和float:right，使其固定在容器的两侧。而主要内容通过设置margin: 0 200px，使其与左右两侧元素保持200px的间距，实现了左右两侧固定，中间自适应的布局效果。

以上就是使用Flex布局和float布局实现两边固定，中间自适应布局的完整攻略，相信可以帮助你理解和掌握这一布局技巧。