A-A+

双飞翼布局(圣杯布局)介绍-始于淘宝UED

2015年12月14日 htmlcss 暂无评论 阅读 74 次

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

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

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

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

  1. <div id="page">
  2.       <div id="hd"></div>
  3.          <div id="bd">
  4.               <div class="main"></div>
  5.               <div class="sub"></div>
  6.               <div class="extra"></div>
  7.          </div>
  8.       <div id="ft"></div>
  9. </div>

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

  1. .main {
  2.            float: left;
  3.            width: 100%;
  4.  }
  5. .sub {
  6.            float: left;
  7.            width: 190px;
  8.            margin-left: -100%;
  9. }
  10. .extra {
  11.              float: left;
  12.              width: 190px;
  13.              margin-left: -190px;
  14.  }

 

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

  1. #bd {
  2.           padding0 230px 0 190px;
  3.  }

点击这里查看效果

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

  1. .sub {
  2.            floatleft;
  3.            width190px;
  4.            margin-left-100%;
  5.            positionrelative;
  6.            left: -190px;
  7. }
  8.   .extra {
  9.              floatleft;
  10.              width230px;
  11.              margin-left-230px;
  12.              positionrelative;
  13.              right: -230px;
  14. }

点击这里查看完成页面 

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

  1. <div id="main" class="column">
  2. <div id="main-content">#main</div>
  3. </div>

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

  1. <div id="page">
  2.                <div id="bd">
  3.                <div class="main"></div>
  4.                </div>
  5. </div>

CSS仅需增加一行:

  1. .main-wrap {    margin0 230px 0 190px;}

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

  1. .extra {
  2.             floatleft;
  3.             width230px;
  4.             margin-left-100%;
  5.             positionrelative;
  6.              left: 190px;
  7.          }
  8. .main-wrap {
  9.                   margin-left430px;
  10.                  }

 

点击这里查看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代码就可以搞定一切。最近在一个论坛项目中准备尝试使用这个布局。希望大家有更好的布局方法一定要多多分享。

  1. <html><head>
  2. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  3. <title>PE Layout Example 4</title>
  4. <style type="text/css">
  5.     body { font: 22px/1.5 Georgia, sans-serif; color: #333; min-width: 500px; }
  6.     a { outline: none; text-decoration: none; color: #8CD0D3; }
  7.     a:visited { color: #8CD0D3; }
  8.     pre { font: 12px 'Courier New', monospace; }
  9.     .main { background: #D6D6D6; }
  10.     .sub { background: #E79F6D; }
  11.     .extra { background: #77BBDD; }
  12.     #hd, #ft {
  13.         height: 50px;
  14.         background: #666; color: #eee;
  15.         text-align: center;
  16.     }
  17.     #ft { height: 40px; }
  18.     /* core layout css */
  19.     .main {
  20.         float: left;
  21.         width: 100%;
  22.     }
  23.     .sub {
  24.         float: left;
  25.         width: 190px;
  26.         margin-left: -100%;
  27.     }
  28.     .extra {
  29.         float: left;
  30.         width: 230px;
  31.         margin-left: -230px;
  32.     }
  33.     .main, .sub, .extra {
  34.         padding-bottom: 5000px;
  35.         margin-bottom: -5000px;
  36.     }
  37.     .main-wrap {
  38.         margin: 0 230px 0 190px;
  39.     }
  40.     #bd { overflow: hidden; _zoom: 1; }
  41. </style>
  42. </head>
  43. <body>
  44. <div id="page2">
  45.     <div id="hd">
  46.         <p>Header</p>
  47.     </div>
  48.     <div id="bd">
  49.         <div class="main">
  50.             <div class="main-wrap">
  51.                 <p>Main</p>
  52.                 <pre>.main {
  53.     float: left;
  54.     width: 100%;
  55. }
  56. .main-wrap {
  57.     margin: 0 230px 0 190px;
  58. }
  59.                 </pre>
  60.             </div>
  61.         </div>
  62.         <div class="sub">
  63.             <p>Sub</p>
  64.             <pre>.sub {
  65.     float: left;
  66.     width: 190px;
  67.     margin-left: -100%;
  68. }
  69.             </pre>
  70.         </div>
  71.         <div class="extra">
  72.             <p>Extra</p>
  73.             <pre>.extra {
  74.     float: left;
  75.     width: 230px;
  76.     margin-left: -230px;
  77. }
  78.             </pre>
  79.         </div>
  80.     </div>
  81.     <div id="ft">
  82.         <p>Footer</p>
  83.     </div>
  84. </div>
  85. </body></html>
  1. 转载:http://www.cnblogs.com/cobby/archive/2012/05/09/2491812.html
标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录