CSS双飞翼布局的两种方式实现示例

CSS双飞翼布局是一种常见的Web页面布局方式，它采用了浮动和负边距等技术来实现三列布局，其中两列固定宽度，中间列自适应宽度。这种布局方式可以使页面中间列自适应宽度，更加灵活自由。

方法一

第一种实现方式是使用浮动和负边距，代码示例如下：

<div class="wrapper">
  <div class="main">Main Content</div>
  <div class="left">Left Column</div>
  <div class="right">Right Column</div>
</div>

.wrapper {
  overflow: hidden;
}

.main {
  float: left;
  width: 100%;
}

.left {
  float: left;
  margin-left: -100%;
  width: 200px;
}

.right {
  float: left;
  width: 150px;
}

在这个示例中，我们将左列的宽度定义为200像素，右列的宽度定义为150像素，中间列的宽度则会自动适应剩余的空间（占满行剩下的宽度）。通过将左列向左移动100%的距离（即200像素），右列的宽度会保留。

方法二

第二种实现方式是使用flexbox。具体实现代码如下：

<div class="wrapper">
  <div class="main">Main Content</div>
  <div class="left">Left Column</div>
  <div class="right">Right Column</div>
</div>

.wrapper {
  display: flex;
}

.main {
  flex-grow: 1;
}

.left {
  flex-basis: 200px;
}

.right {
  flex-basis: 150px;
}

在这个示例中，使用了flexbox的弹性盒子布局方式，通过给中间列设置flex-grow:1属性，中间列会自动填充剩余的宽度。而左列和右列则分别设置了宽度为200像素和150像素，可以根据实际需要进行调整。

以上两种方式都可以实现CSS双飞翼布局，根据实际需求选择合适的方式即可。