html双飞翼布局

双飞翼布局是一种常用的网页布局方式，它可以实现三栏布局，左右两栏固定宽度，中间栏自适应宽度。以下是实现双飞翼布局的HTML和CSS代码：

HTML代码：

<div class="container">
  <div class="left">左栏</div>
  <div class="middle">中间栏</div>
  <div class="right">右栏</div>
</div>

CSS代码：

.container {
  margin: 0 auto;
  width: 100%;
}

.left {
  float: left;
  width: 200px;
  margin-left: -100%;
  position: relative;
  background-color: #ccc;
}

.middle {
  float: left;
  width: 100%;
  background-color: #eee;
}

.right {
  float: left;
  width: 200px;
  margin-left: -200px;
  position: relative;
  background-color: #ccc;
}

解释：

1. .container是包含所有内容的容器，设置width: 100%可以使它占满整个屏幕。
2. .left和.right分别代表左栏和右栏，它们都使用float: left让它们在同一行显示。
3. .left和.right都使用position: relative，因为它们的子元素可能需要使用相对定位。
4. .left和.right都设置了负的左边距，使它们可以移到中间栏的左右两侧。
5. .middle是中间栏，它会自适应宽度，填充剩余的空间。
6. 所有栏目都设置了背景颜色，方便观察布局效果。

这样，就可以实现双飞翼布局。需要注意的是，如果要在左、中、右栏中添加内容，需要使用内部容器，并在内部容器上设置宽度，而不是直接在栏目上设置宽度。