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

左岸

web前端

 
 
 

日志

 
 

淘宝双飞翼布局研究  

2012-12-12 10:45:45|  分类: css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

什么?你不知道双飞翼布局!那恭喜你,你跟我差不多,我们都凹凸很久了。我之前也没仔细研究过这个东东,今天又看到了,就仔细研究了一下,也还是有新的收获的~


双飞翼布局是一种灵活的布局,始于淘宝UED,应该是玉伯提出的。如果把三栏布局比作一只大鸟,可以把main看成是鸟的身体,sub和extra则是鸟的翅膀。这个布局的实现思路是,先把最重要的身体部分放好,然后再将翅膀移动到适当的地方。因此请容许我给这个布局实现取名为双飞翼布局


关于main和sub,接下来就讲到了

仔细分析各种布局,有些技术是经常被用到的,float,负margin和相对定位。这是实现布局的三个最基本的原子技术。只要巧妙组合,并加以灵活运用,就能“拼”出各种布局的实现方案。

先来看个例子


   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>

而对应的css呐

.main {                     float: left;                    width: 100%;                background:#39c;             height:300px;   }    .sub {                    float: left;                     width: 480px;                     margin-left: -100%;                background:#f60;              height:300px;  }     .extra {                       float: left;                       width: 190px;                       margin-left: -190px;                background:#666;               height:300px;   }  

这样我们就得到了一个这样的布局

result-1

这里要提的一点是,负margin到div全部无法显示的时候就会回到上一行,比如如果先删掉extra,这里sub的宽度是父元素的一半,如果sub的margin-left是-49%的时候还会在下一行,只显示一点点result-2

而设置了50的时候sub就已经紧贴main右边完全显示了

对于这一点,之前我一直以为会一直左移的,看来是我傻逼了

言归正传,可以看出,通过简单的负边距,已经让sub和extra定位到正确的位置。剩下的问题是如何让main也定位到正确的位置

一个自然的想法是,给main的容器#bd添加padding

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

这里数值是我随便取的,大家不要在意,具体例子可以看这里example2

但是这里问题又来了,加了padding之后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;      }

此时的demo:demo

还有一些更深入的思考,有兴趣的同学可移步

  评论这张
 
阅读(268)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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