CSS 之圣杯布局&双飞翼布局

圣杯布局和双飞翼布局是重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。

遵循了以下要点：

两侧宽度固定，中间宽度自适应
中间部分在DOM结构上优先，以便先行渲染
允许三列中的任意一列成为最高列
只需要使用一个额外的<div>标签

　　圣杯布局

　　　　1、结构：

 <div id="header"></div>

 <div id="container">

   <div id="center" class="column"></div>

   <div id="left" class="column"></div>

   <div id="right" class="column"></div>

 </div>

 <div id="footer"></div>

　　　　2、CSS 样式

　　　　（1）假设左侧的固定宽度为200px，右侧的固定宽度为150px，则首先在container上设置：

 #container {

   padding-left: 200px;

   padding-right: 150px;

 }

　　　　　　为左右两列预留出相应的空间，得到如下示意图：

　　　　（2）随后分别为三列设置宽度与浮动，同时对footer设置清除浮动：

 #container .column {

   float: left;

 }

 #center {

   width: 100%;

 }

 #left {

   width: 200px;

 }

 #right {

   width: 150px;

 }

 #footer {

   clear: both;

 }

　　　　得到如下效果：

　　　　　根据浮动的特性，由于center的宽度为100%，即占据了第一行的所有空间，所以left和right被“挤”到了第二行。

　　　(3) 接下来的工作是将left放置到之前预留出的位置上，这里使用负外边距：

 #left {

   width: 200px;

   margin-left: -100%;

 }

　　　　　得到：

　　　　（4）随后还需要使用定位(position)方法：

 #left {

   width: 200px;

   margin-left: -100%;

   position: relative;

   right: 200px;

 }

　　　　这里使用position: relative和right: 200px将left的位置在原有位置基础上左移200px，以完成left的放置：

　　　　（5）接下来放置right，只需添加一条声明即可：

 #right {

   width: 150px;

   margin-right: -150px;

 }

　　　　最终效果图：

　　　　至此，布局效果完成。不过还需要考虑最后一步，那就是页面的最小宽度：要想保证该布局效果正常显示，由于两侧都具有固定的宽度，所以需要给定页面一个最小的宽度，

　　　　但这并不只是简单的200+150=350px。回想之前left使用了position: relative，所以就意味着在center开始的区域，还存在着一个left的宽度。所以页面的最小宽度应该设置为200+150+200=550px：

　　双飞翼布局

　　　　1、结构

 <body>

   <div id="header"></div>

   <div id="container" class="column">

     <div id="center"></div>

   </div>

   <div id="left" class="column"></div>

   <div id="right" class="column"></div>

   <div id="footer"></div>

 <body>

　　　2、样式

　　　　（1）与圣杯布局相同的思路，首先设置各列的宽度与浮动，并且为左右两列预留出空间，以及为footer设置浮动清除：

 #container {

   width: 100%;

 }

 .column {

   float: left;

 }

 #center {

   margin-left: 200px;

   margin-right: 150px;

 }

 #left {

   width: 200px;

 }

 #right {

   width: 150px;

 }

 #footer {

   clear: both;

 }

　　　　　　以上代码将container,left,right设置为float: left，而在container内部，center由于没有设置浮动，所以其宽度默认为container的100%宽度，通过对其设置margin-left和margin-right为左右两列预留出了空间。

　　　　（2）将left放置到预留位置：

 #left {

   width: 200px;

   margin-left: -100%;

 }

　　　　（3）将right放置到预留位置：

 #right {

   width: 150px;

   margin-left: -150px;

 }

　　　　最后计算最小页面宽度：由于双飞翼布局没有用到position:relative进行定位，所以最小页面宽度应该为200+150=350px。但是当页面宽度缩小到350px附近时，会挤占中间栏的宽度，使得其内容被右侧栏覆盖。

　　　因此在设置最小页面宽度时，应该适当增加一些宽度以供中间栏使用。

　　　　更多详情，参考这篇文章：圣杯布局和双飞翼布局