圣杯布局和双飞翼布局

突然在网上看到这两种布局方式，这里整理一下，做个笔记，这两种布局都是针对 "三栏布局" 实现 左右固定宽度，中间自适应宽度。

• 以下是两种布局方式HTML结构 ( 这两种方式都得中间部分放第一个位置 )

<!--圣杯布局HTML结构-->
<div id="container">
    <!--中间部分放第一个-->
    <div id="center" class="column">我就是中间内容部分了</div>
    <div id="left" class="column"></div>
    <div id="right" class="column"></div>
</div>

<!--双飞翼布局HTML结构-->
<div id="container">
    <!--中间部分放第一个-->
    <div id="center" class="column">
        <!--比 圣杯布局 多一层内容区域-->
        <div class="main">我就是中间内容部分了</div>
    </div>
    <div id="left" class="column"></div>
    <div id="right" class="column"></div>
</div>

• 在看看分别的style样式设定

• 这圣杯布局感觉比较麻烦，就不多说了， 参照：holygrail

/** 
  * 圣杯布局样式
**/
#container {
    padding-left: 100px;    /* LC width*/
    padding-right: 100px;   /* RC width*/
}
#container .column {
    position: relative;
    float: left;
}
#center {
    width: 100%;
    height: 500px;
    background: #ddd;
}
#left {
    width: 100px;           /* LC width*/
    right: 100px;           /* LC width*/
    margin-left: -100%;
    height: 500px;
    background: #f00;
}
#right {
    width: 100px;           /* RC width*/
    margin-right: -100px;   /* RC width*/
    height: 500px;
    background: #123;
}
/*** IE6 Fix ***/
* html #left {
    left: 100px;            /* RC width*/
}

• 双飞翼布局 比 圣杯布局 中间部分多了一层div，但样式比 圣杯 少了些，更简洁方便。

• 第一步：将三栏容器都设置浮动：float: left;
• 第二步：将中间部分宽度设置百分百：width: 100%;
• 第三步：将左右栏布局设定固定宽度，如：width: 100px;
• 第四步：设置左边栏，将左栏left设置 margin-left: -100% 这样就把 left 拉到最左边
• 第五步：设置右边栏，同理设置 margin-left: -100px (负右栏的宽度)，这时候就把 right 拉到了最右边
• 最后：由于中间部分是100%，左右两边内容被 left 和 right 挡住了，需增加一个div容器，设置margin: 0 100px 0 100px 这样就把容器内容挤压到了中间可见区域

/** 
  * 双飞翼布局样式
**/
#container .column {
    float: left;
}
#center {
    width: 100%;
    height: 300px;
    background: #ccc;
}
#center .main {
    margin: 0 100px 0 100px;
}
#left {
    margin-left: -100%;
    width: 100px;
    height: 300px;
    background: #666;
}
#right {
    margin-left: -100px;
    width: 100px;
    height: 300px;
    background: #333;
}

本人自己还有一套布局方式，采用绝对定位实现，更简洁，在移动端也常用，移动端采用 上、中、下

• 先看看HTML结构

<!--绝对定位方式布局-->
<div id="center" class="column">我就是中间内容部分了</div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>

• 在看看布局style样式，三栏统一设置绝对定位，左右各自靠左，靠右，中间向左右各偏移100像素，就OK了

.column {
    position: absolute;
    top: 0;
    height: 300px;
}
#center {
    left: 100px;
    right: 100px;
    width: 100%;
    background: #ccc;
}
#left {
    left: 0;
    width: 100px;
    background: #666;
}
#right {
    right: 0;
    width: 100px;
    background: #333;
}