前端实现双飞翼布局

双飞翼布局是一种常见的三栏布局，它可以让中间内容自适应宽度，左右两侧宽度固定并且可以放置固定宽度的元素。下面是一个基于 CSS 的双飞翼布局示例：

HTML 结构：

<div class="container">
  <div class="left">左侧内容</div>
  <div class="right">右侧内容</div>
  <div class="middle">中间内容</div>
</div>

CSS 样式：

.container {
  width: 100%;
  overflow: hidden;
}
.left,
.right,
.middle {
  float: left;
  height: 200px;
}
.left {
  width: 200px;
  background-color: #ccc;
  margin-left: -100%;
}
.middle {
  width: 100%;
  background-color: #eee;
}
.right {
  width: 200px;
  background-color: #ccc;
  margin-left: -200px;
}

解释：

- 容器 `.container` 设置 `overflow: hidden` 以防止浮动元素溢出。
- 左侧 `.left`、右侧 `.right` 和中间 `.middle` 这三个元素都设置了 `float: left` 让它们在同一行排列。
- 左侧 `.left` 和右侧 `.right` 的宽度都是固定的，中间 `.middle` 的宽度设置为 100%，这样中间内容就可以自适应宽度。
- 左侧 `.left` 设置 `margin-left: -100%`，这样它的左边距就等于它自身宽度的负值，相当于左侧内容向左移动了一个 `.left` 的宽度，让它的位置在中间内容的左侧。
- 右侧 `.right` 设置 `margin-left: -200px`，这样它的左边距就等于它自身宽度的负值，相当于右侧内容向左移动了一个 `.right` 的宽度，让它的位置在中间内容的右侧。

这样就实现了一个基于 CSS 的双飞翼布局。