双飞翼布局（圣杯布局）介绍-始于淘宝UED

来源：互联网发布：js中定义数组编辑：程序博客网时间：2024/05/01 03:02

仔细分析各种布局的技术实现，可以发现下面三种技术被经常使用：

浮动 float
负边距 negative margin
相对定位 relative position

这是实现布局的三个最基本的原子技术。只要巧妙组合，并加以灵活运用，就能“拼”出各种布局的实现方案。

尝试之路考虑以下DOM结构：

<div id="page">          <div id="hd"></div>             <div id="bd">                      <div class="main"></div>                      <div class="sub"></div>                      <div class="extra"></div>             </div>         <div id="ft"></div></div>

利用浮动元素的负边距来定位：

.main {                   float: left;                  width: 100%;    }  .sub {                  float: left;                   width: 190px;                   margin-left: -100%;    }   .extra {                     float: left;                     width: 190px;                     margin-left: -190px;    }

这样我们得到了第一个尝试页面点击这里查看效果
可以看出，通过简单的负边距，已经让sub和extra定位到正确的位置。剩下的问题是如何让main也定位到正确的位置。
一个自然的想法是，给main的容器#bd添加padding:

#bd {                  padding: 0 230px 0 190px;    }

点击这里查看效果

这样能让main定位到正确的位置，但sub和extra的位置不对了。这是一个思考的关卡。既然sub和extra的位置不对，那就想办法调整到正确的位置。相对定位隆重登场：

.sub {                   float: left;                   width: 190px;                   margin-left: -100%;                   position: relative;                   left: -190px;    }    .extra {                     float: left;                     width: 230px;                     margin-left: -230px;                     position: relative;                     right: -230px;    }

点击这里查看完成页面

很明显，这就是圣杯布局！
在不增加任何额外标签的假设上，我尝试了各种想法，但始终都没找到完美的布局实现（圣杯布局是我觉得所有想法中最接近完美的）。
既然不添加额外标签时，完美布局的实现如此困难，那如果允许添加一个额外标签呢？在淘宝UED内部的探讨中，给main增加了一层包裹：

<div id="main" class="column">    <div id="main-content">#main</div></div>

里层main-content的作用就是将main定位到合适的位置，并方便设置padding等属性。想到此处，就像牛顿被苹果砸傻了一样，原来的main定位问题迎刃而解：

<div id="page">                    <div id="bd">                        <div class="main"></div>                </div> </div>

CSS仅需增加一行：

.main-wrap {    margin: 0 230px 0 190px;}

想看example4效果点这里
一切如此简单！除了添加了一个额外标签，其它各方面，表现都很完美（试了下IE5.5, 也没任何问题）。目前只用到了浮动和负边距，如果再引入相对定位，还可以实现三栏布局的各种组合

.extra {                    float: left;                    width: 230px;                    margin-left: -100%;                    position: relative;                     left: 190px;             }    .main-wrap {                          margin-left: 430px;                    }

点击这里查看example5效果

仔细查看example5和example4的源代码，可以发现DOM结构是完全一样的，仅仅CSS稍有不同。这意味着HTML结构和CSS布局在一定程度上解耦了，我们开发HTML代码时，从内容出发即可，无需过多的考虑布局。这正是渐进增强在前端工作流程上的体现。
如果把三栏布局比作一只大鸟，可以把main看成是鸟的身体，sub和extra则是鸟的翅膀。这个布局的实现思路是，先把最重要的身体部分放好，然后再将翅膀移动到适当的地方。因此请容许我给这个布局实现取名为双飞翼布局（Flying Swing Layout）.
就如上图中的鸟有各种姿势一样，利用双飞翼布局，我们也可以实现各种布局。这里有个尝试页面，利用双飞翼，实现了一套栅格化布局系统。

优点

实现了内容与布局的分离，即Eric提到的Any-Order Columns.
main部分是自适应宽度的，很容易在定宽布局和流体布局中切换。
任何一栏都可以是最高栏，不会出问题。
需要的hack非常少（就一个针对ie6的清除浮动hack:_zoom: 1;）
在浏览器上的兼容性非常好，IE5.5以上都支持。

不足

main需要添加一个额外的包裹层。
等待你的发现与反馈。

双飞翼的布局非常灵活，只要调整css代码就可以搞定一切。最近在一个论坛项目中准备尝试使用这个布局。希望大家有更好的布局方法一定要多多分享。

<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8">    <title>PE Layout Example 4</title><style type="text/css">    body { font: 22px/1.5 Georgia, sans-serif; color: #333; min-width: 500px; }    a { outline: none; text-decoration: none; color: #8CD0D3; }    a:visited { color: #8CD0D3; }    pre { font: 12px 'Courier New', monospace; }    .main { background: #D6D6D6; }    .sub { background: #E79F6D; }    .extra { background: #77BBDD; }    #hd, #ft {        height: 50px;        background: #666; color: #eee;        text-align: center;    }    #ft { height: 40px; }    /* core layout css */    .main {        float: left;        width: 100%;    }    .sub {        float: left;        width: 190px;        margin-left: -100%;    }    .extra {        float: left;        width: 230px;        margin-left: -230px;    }    .main, .sub, .extra {        padding-bottom: 5000px;        margin-bottom: -5000px;    }    .main-wrap {        margin: 0 230px 0 190px;    }        #bd { overflow: hidden; _zoom: 1; }</style></head><body><div id="page2">    <div id="hd">        <p>Header</p>    </div>    <div id="bd">        <div class="main">            <div class="main-wrap">                <p>Main</p>                <pre>.main {    float: left;    width: 100%;}.main-wrap {    margin: 0 230px 0 190px;}                </pre>            </div>        </div>        <div class="sub">            <p>Sub</p>            <pre>.sub {    float: left;    width: 190px;    margin-left: -100%;}            </pre>        </div>        <div class="extra">            <p>Extra</p>            <pre>.extra {    float: left;    width: 230px;    margin-left: -230px;}            </pre>        </div>    </div>    <div id="ft">        <p>Footer</p>    </div></div></body></html>

转载：http://www.cnblogs.com/cobby/archive/2012/05/09/2491812.html