圣杯布局（Holy Grail Layout）和双飞翼布局（Double Wing Layout）都是用来实现三列布局的常见技术，其中两侧列宽度固定，中间列宽度自适应，并且中间列在文档流中优先渲染。以下是两种布局的详细介绍和代码示例：
圣杯布局（Holy Grail Layout）
特点：
- 使用相对定位和负边距来实现侧边栏的定位。
- HTML结构简单，只需要一个容器包裹所有列。
CSS代码示例：
body {
min-width: 550px;
}
#header {
background-color: #999999;
}
#middle {
padding-left: 200px;
padding-right: 150px;
}
#middle .column {
float: left;
height: 200px;
}
#left {
width: 200px;
background-color: #FFFF00;
margin-left: -100%;
position: relative;
right: 200px;
}
#center {
width: 100%;
background-color: pink;
}
#right {
margin-right: -150px;
width: 150px;
background-color: #CCCCCC;
}
#footer {
background-color: #999999;
}
.clearfix:after {
display: table;
content: '';
clear: both;
}HTML结构：
<div id="header">header</div>
<div id="middle" class="clearfix">
<div id="center" class="column">center</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>
</div>
<div id="footer">footer</div>双飞翼布局（Double Wing Layout）
特点：
- 通过使用嵌套的
<div>来实现侧边栏的定位，以及使用负外边距将主内容区域撑开。 - HTML结构中，中间内容部分被额外的div包裹。
CSS代码示例：
body {
min-width: 550px;
}
.col {
float: left;
}
#main {
width: 100%;
height: 200px;
background-color: #FFC0CB;
}
#main-wrap {
margin: 0 200px 0 150px;
}
#left {
width: 150px;
height: 200px;
background-color: #FFFF00;
margin-left: -100%;
}
#right {
width: 200px;
height: 200px;
background-color: #cccccc;
margin-left: -200px;
}HTML结构：
<div id="main" class="col">
<div id="main-wrap">
main
</div>
</div>
<div id="left" class="col">
left
</div>
<div id="right" class="col">
right
</div>这两种布局方式都能很好地解决三列布局的问题，选择哪一种取决于个人喜好和项目需求。圣杯布局通过在中间列使用padding和负margin来实现布局，而双飞翼布局则在中间列内部添加一个子容器，并通过margin来留出左右两侧列的空间。