注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

左岸

web前端

 
 
 

日志

 
 

何为双飞翼布局??--  

2012-05-17 10:09:34|  分类: css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

仔细分析各种布局的技术实现,可以发现下面三种技术被经常使用:
浮动 float
负边距 negative margin
相对定位 relative position

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


尝试之路

考虑以下DOM结构:

<div id="bd">
        <div class="main">
            <div class="main-wrap">
                <p>Main</p>
            .基本的原子技术。只要巧妙组合,并加以灵活运用,就能“拼”出各种布局的实现方案           

</div>
        </div>
        <div class="sub">
            <p>Sub</p>
            本的原子技术。只要巧妙组合       

</div>

 <div class="extra">
            <p>Extra</p>
            本的原子技术。只要巧妙组合  

</div>

</div>

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

 .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; }

demo页面: http://lifesinger.googlecode.com/svn/trunk/lab/2008/pe_layout_example4.html

demo页面:http://lifesinger.googlecode.com/svn/trunk/lab/2008/pe_layout_example5.html

仔细查看
example5

example4
的源代码,可以发现DOM结构是完全一样的,仅仅CSS稍有不同。这意味着HTML结构和CSS布局在一定程度上解耦了,我们开发HTML代码时,从内容出发即可,无需过多的考虑布局。这正是渐进增强在前端工作流程上的体现。

如果把三栏布局比作一只大鸟,可以把
main
看成是鸟的身体,
sub

extra
则是鸟的翅膀。这个布局的实现思路是,先把最重要的身体部分放好,然后再将翅膀移动到适当的地方。因此请容许我给这个布局实现取名为双飞翼布局(Flying Swing Layout).


何为双飞翼布局??-- - sssxiaoliya - 左岸
优点
实现了内容与布局的分离,即Eric提到的Any-Order Columns.
main
部分是自适应宽度的,很容易在定宽布局和流体布局中切换。
任何一栏都可以是最高栏,不会出问题。
需要的hack非常少(就一个针对ie6的清除浮动hack:
_zoom: 1;

在浏览器上的兼容性非常好,IE5.5以上都支持。
不足
main
需要添加一个额外的包裹层。
等待你的发现与反馈。
  评论这张
 
阅读(1222)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017