css常用布局之圣杯布局和双飞翼布局

圣杯布局（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来留出左右两侧列的空间。