分别举例圣杯布局和双飞翼布局

圣杯布局（Holy Grail Layout）和双飞翼布局（Double Wings Layout）都是用于创建三栏布局的常见方法，它们的目标都是实现一个固定中间列和两个可变宽度的侧边列。

圣杯布局示例代码如下：

<div id="container">
  <div id="left"></div>
  <div id="middle"></div>
  <div id="right"></div>
</div>

#container {
  display: flex;
}

#left, #middle, #right {
  height: 200px;
}

#left {
  flex: 1;
  background-color: green;
}

#middle {
  flex: 2;
  background-color: yellow;
}

#right {
  flex: 1;
  background-color: blue;
}

圣杯布局通过使用flexbox来实现，将左侧和右侧列设置为相等的flex值，将中间列设置为两倍于侧边列的flex值。

双飞翼布局示例代码如下：

<div id="container">
  <div id="content"></div>
</div>

<div id="left"></div>
<div id="right"></div>

#container {
  padding-left: 200px;
  padding-right: 200px;
}

#content {
  float: left;
  width: 100%;
}

#left, #right {
  float: left;
  width: 200px;
  margin-left: -100%;
}

#left {
  background-color: green;
}

#content {
  background-color: yellow;
}

#right {
  background-color: blue;
}

双飞翼布局使用了浮动和负边距来实现，通过将内容放在一个容器中，再将两侧列使用负边距向左浮动，以便让内容占据整个可用宽度。

这些布局方法都有各自的优缺点，可以根据具体需求选择适合的布局方式。