双飞翼布局介绍-始于淘宝UED-2011年淘宝玉伯写的

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

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

来源: <http://www.dqqd.me/flying-wing/>

时间: 2024-10-17 01:54:41

双飞翼布局介绍-始于淘宝UED-2011年淘宝玉伯写的的相关文章

双飞翼布局介绍-始于淘宝UED

仔细分析各种布局的技术实现,可以发现下面三种技术被经常使用: 浮动 float 负边距 negative margin 相对定位 relative position 这是实现布局的三个最基本的原子技术.只要巧妙组合,并加以灵活运用,就能“拼”出各种布局的实现方案. 尝试之路考虑以下DOM结构: <div id="page">           <div id="hd"></div>              <div id

逛园子,看到个练习题,小试了一把(淘宝ued的两道小题)

闲来无事,逛园子,充充电.发现了一个挺有意思的博文,自己玩了一把. 第一题:使用 HTML+CSS 实现如图布局,border-widht 1px,一个格子大小是 60*60,hover时候边框变为橘红色(兼容IE6+,考虑语义化的结构) 效果图: 简单分析一下: 使用伪类 :hover的时候相对定位 改变z-index, 代码如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta c

关于瀑布流的算法(转淘宝ued)

1 多列浮动 各列固定宽度,并且左浮动: 一列中的数据块为一组,列中的每个数据块依次排列即可: 更多数据加载时,需要分别插入到不同的列上: 优点: 布局简单,应该说没啥特别的难点: 不用明确知道数据块高度,当数据块中有图片时,就不需要指定图片高度. 缺点: 列数固定,扩展不易,当浏览器窗口大小变化时,只能固定的x列,如果要添加一列,很难调整数据块的排列: 滚动加载更多数据时,还要指定插入到第几列中,还是不方便. 2 CSS3 指定容器的列个数,列间距,列中间边框,列宽度来实现 1 #contai

用jQuery和css3实现的一个模仿淘宝ued博客左边的菜单切换动画效果

今天看到淘宝ued博客上左边的菜单导航动画效果不错,就用jQuery和css3做了一个简单的例子,主要是实现运用了jQuery 事件和css3 transition属性. 用一个元素来实现鼠标滑动到某个导航的背景效果,文字颜色也运用css3 transition 渐变的效果 当鼠标滑动其他导航的时候,加背景的元素的top值也会随着变化,定位到当前的导航上,同时文字字体颜色也会跟着改变: 主要实现的html代码如下: <div class="menuBox"> <div

淘宝小号交易平台分享淘宝知识给大家,学到就是赚到

http://www.taobao.com/go/act/sale/ruzhujieshao.php http://www.taobao.com/go/act/university/tpanli.php 30 http://www.taobao.com/go/act/sale/hezuohuoban.php http://www.taobao.com/go/act/sale/fuwujieshao.php http://www.taobao.com/go/act/university/taonv

淘宝小号交易整理淘宝知识,为开网店做好准备哈

其实,个人创业者在创业初期所拥有的仅仅是一个梦想而已,或者说是一个起步的小摊子,还压根谈不上事业,别那么小气,至于分钱,没有舍哪有得,舍不得眼前的初始阶段的利润分享,那有更大的后期利润呢. 3.利润降低,薄利多销: 当然,这个团队无论有几个合作者,所持有的股份上可以做到大家平均,但在统一规划方面必须得确立一个主导者,不然就很容易出乱子,各人的资源不通过一个整体的框架进行调配整合,就是浪费,每个人的执行力若是没有集中在一个方向上,也是浪费,尤其是大家形成决议后,就必须确保集中所有的资源和力量,向一

淘宝店群骗局 淘宝店群模式靠谱吗

做淘宝的大概陆续的也都听过了解过淘客店群的项目,这个项目会形成大大小小的圈子,一个传一个,现在有很多人都在操作.当然操作的人的不同,做出的效果也参差不齐,做得好的并没有多少.其实这个项目在几年前就已经兴起了,那会做的人少,刚开始这个模式非常暴力,在17年达到顶峰.很多人纷纷加入,圈子一大,淘宝就发现了.无规矩不成方圆,然后想要不触犯淘宝的规则,需要的是心细,那么就必定会淘汰一拨人.淘宝的每次调整,每次的洗牌,都有人出局.优秀的人任然做的有声有色,而很多玩家被迫出局,就开始散步淘宝店群是骗局的谣言

阿里淘宝小号交易不懂淘宝知识_店铺会有屏蔽的危机_青岛易亚小孙

一丶用量子挖掘买家数据 以上的四点是有逻辑的,思路是:引入客户--让顾客记住你--让客户经常来店里逛逛--维护客户. 提高复购率,最主要的是你有优质的商品得到了买家的肯定,另外要有渠道让买家来店铺购买,这里的渠道就是你的老客维护了,你要告诉老客从哪里进入店铺:二维码丶店铺连接等等.你可以给顾客权利丶发优惠,京东的一个点就是当妈妈买的奶粉快用完的时候给妈妈发一条优惠短信,这个时候绝大部分的妈妈都会重新去京东. 1丶登陆量子后台点击查看销售详解-买家购买分析 1丶形成表格后将不是店铺回头客的先筛选出

淘宝小号交易平台常熟淘宝培训 常熟哪里有淘宝网店培训班 学习专业的淘宝知识 像南方教育看齐

公司地址:常熟市招商北路8号天虹服装城a栋705(汽车南站旁) 现在很多新手都疑惑怎么开淘宝店,而且如今淘宝竞争如此之大,如果我此时才进入淘宝大军,还能有市场,还能有机会吗?目前淘宝店铺达到600多万家,要怎么做才能创出一条路呢? 4.1 在线沟通工具 4.3 店铺管理工具 7.2 货物打包 7.3 物流配送 第4章 网店工具的运用 公司地址:常熟市招商北路8号天虹服装城a栋705(汽车南站旁) 7.1 仓储管理 4.4 店内营销工具 8.5 商城日常管理 8.3 商家平台规则 3.2 商品发布