A-A+

双飞翼和圣杯布局

2016年01月25日 htmlcss 暂无评论 阅读 260 次

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

浮动 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 {        
           floatleft;       
           width100%;   
 }  .sub {       
           floatleft;        
           width190px;        
           margin-left-100%;    }   .extra {        
             floatleft;        
             width190px;        
             margin-left-190px;   
 }

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

#bd {        
          padding0 230px 0 190px;   
 }

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

.sub {        
           floatleft;        
           width190px;        
           margin-left-100%;        
           positionrelative;        
           left-190px;    }  
  .extra {        
             floatleft;        
             width230px;        
             margin-left-230px;        
             positionrelative;        
             right-230px;    }

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

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

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

CSS仅需增加一行:

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

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

.extra {        
            floatleft;        
            width230px;        
            margin-left-100%;        
            positionrelative;        
             left190px;    
         }    .main-wrap {        
                  margin-left430px;   
                 }

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

原文来自:http://www.imooc.com/wenda/detail/254035

demo: 双飞翼: demo

圣杯布局:demo

案例3 : demo

标签:

给我留言

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

用户登录