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

  • 浮动 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/>

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

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

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

  2. 使用jQuery和css3实现了仿淘宝ued博客左边的菜单切换动画

    今天看到淘宝ued博客的左侧导航菜单的动画好,要使用jQuery和css3我做一个简单的示例,主要用途是实现jQuery 事件和css3 transition属性. 个元素来实现鼠标滑动到某个导航的背 ...

  3. 淘宝ued - 前端智勇大闯关(第三季)答案(更新)

    淘宝ued - 前端智勇大闯关(第三季)答案(更新) 下午在微博上看到了淘宝智勇大闯关第三季的信息,感觉挺有意思的,于是就尝试做了下.附上题目地址: http://ued.campus.alibaba ...

  4. 【转】淘宝UED上关于chrome的transition闪烁问题的解决方案

    最近在用BetterScroll实现一个功能的时候,在滚动区域中会有一个绝对定位的按钮,结果在IOS中出现了快速滚动,停止的时候,会先消失后显现的问题,所以查找了相关的文章,发现是transition ...

  5. 淘宝UED上关于chrome的transition闪烁问题的解决方案

    前段时间,有同事和会员反馈使用Chrome访问淘宝首页会出现画面闪动的现象,但是我在Mac和Win下面的Chrome都无法重现这个问题,后来重装了一遍Win7下的Chrome Beta版本,终于重现了 ...

  6. HttpHelper类登录淘宝联盟并下载淘宝客订单xls

    本次开发环境与工具如下:IE9.0浏览器 + IE抓包插件HttpWatch +WIN7 64位系统 + VS2005 IDE + .NET 2.0框架本想上传HttpWatch抓包插件,但由于文件超 ...

  7. 关于淘宝的数据来源,针对做淘宝客网站的淘宝api调用方法

    上次写了个淘宝返利模式的博客,直接被移除首页,不知道何故啊.可能是真的跟技术不太刮边. 众所周知,能够支撑一个网站运营的最基础不是程序写的多么好.也不是有多么牛X的运营人员,最主要的是数据,如果没有数 ...

  8. 【淘宝客】根据淘客联盟精选清单(淘宝天猫内部优惠券)随机显示淘宝天猫优惠券dome

    也许大家在生活中经常淘宝看到[淘宝天猫内部优惠券]的网站,或者在微博中经常有博主发券,让大家生活中购物便宜许多,作为一个站长,我们也希望自己的网站也能有这样的一个功能,现在就分享给大家,还是免后台哦. ...

  9. npm换淘宝源 yarn换淘宝源

    查询初始的源 npm get registry > https://registry.npmjs.org/ 设置淘宝源 npm config set registry http://regist ...

随机推荐

  1. jni中c代码调用java代码

    原理是使用反射的机制 java中反射的例子: Class<?> forName = Class.forName("com.example.ndkcallback.DataProv ...

  2. C# 使用WebClient时,在多网卡时,指定IP发送Web请求

    需要定义一个类,重写GetWebRequest,在方法内,指定IP地址 public class MyWebClient : WebClient { private IPAddress ipAddre ...

  3. phpstudy打不开localhost(Apache)

    1.先打开httpd.conf文件,打开httpd-vhosts.conf "Include conf/extra/httpd-vhosts.conf"的注释,启动服务时优先加载此 ...

  4. .net使用DotNetCharting控件生成报表统计图总结

    最近在做项目时要对数据进行统计分析,所以必须生成一些报表统计图(如柱形图.饼图.曲线图等),网上强烈推荐了使用DotNetCharting控件来实现,于是自己对DotNetCharting控件进行了简 ...

  5. 深度技术Win7系统利用diskpart命令实现硬盘分区的技巧

    转自:http://www.xitongcheng.com/jiaocheng/win7_article_2491.html 1. 深度技术Win7系统利用diskpart命令实现硬盘分区的技巧分享给 ...

  6. sql语句之正则表达式

    select * from employee where name regexp '^jin' select * from employee where name regexp '^jin.*(g|n ...

  7. 20个Flutter实例视频教程-第14节: 展开闭合列表案例

    博客地址; https://jspang.com/post/flutterDemo.html#toc-5b0 视频地址: https://www.bilibili.com/video/av397092 ...

  8. AS3 滤镜相关

    <ignore_js_op> package {        import flash.display.Sprite;        import flash.filters.BlurF ...

  9. FZU 2150 Fire Game (高姿势bfs--两个起点)(路径不重叠:一个队列同时跑)

    Description Fat brother and Maze are playing a kind of special (hentai) game on an N*M board (N rows ...

  10. 201621123016《Java程序设计》第1周学习总结

    1. 本周学习总结 本周的学习内容:java的发展历史,java程序设计环境,java简单语法. java与c++一样是一门面向对象的程序设计语言(相比于c++它是一门更彻底的面向对象的程序设计语言) ...