双飞翼布局（圣杯布局）介绍-始于淘宝UED

最新推荐文章于 2022-07-30 21:56:49 发布
最新推荐文章于 2022-07-30 21:56:49 发布
阅读量443 收藏
点赞数
分类专栏： HTML&&CSS

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

  • 浮动 float
  • 负边距 negative margin
  • 相对定位 relative position

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

尝试之路考虑以下DOM结构：

[html] view plain copy
  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>  

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

[html] view plain copy
  1. .main {          
  2.            float: left;         
  3.            width: 100%;     
  4.  }    
  5. .sub {         
  6.            float: left;          
  7.            width: 190px;          
  8.            margin-left: -100%;      
  9. }     
  10. .extra {          
  11.              float: left;          
  12.              width: 190px;          
  13.              margin-left: -190px;     
  14.  }  

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

[css] view plain copy
  1. #bd {          
  2.           padding: 0 230px 0 190px;     
  3.  }  

点击这里查看效果

这样能让main定位到正确的位置，但sub和extra的位置不对了。这是一个思考的关卡。既然sub和extra的位置不对，那就想办法调整到正确的位置。相对定位隆重登场：

[css] view plain copy
  1. .sub {          
  2.            float: left;          
  3.            width: 190px;          
  4.            margin-left: -100%;          
  5.            position: relative;          
  6.            left: -190px;      
  7. }    
  8.   .extra {          
  9.              float: left;          
  10.              width: 230px;          
  11.              margin-left: -230px;          
  12.              position: relative;          
  13.              right: -230px;      
  14. }  

点击这里查看完成页面 

很明显，这就是圣杯布局！
在不增加任何额外标签的假设上，我尝试了各种想法，但始终都没找到完美的布局实现（圣杯布局是我觉得所有想法中最接近完美的）。
既然不添加额外标签时，完美布局的实现如此困难，那如果允许添加一个额外标签呢？在淘宝UED内部的探讨中，给main增加了一层包裹：

[css] view plain copy
  1. <div id="main" class="column">     
  2.    
  3. <div id="main-content">#main</div>  
  4.   
  5. </div>  

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

[css] view plain copy
  1. <div id="page">      
  2.    
  3.                <div id="bd">          
  4.    
  5.                <div class="main"></div>  
  6.    
  7.                </div>  
  8.    
  9. </div>  

CSS仅需增加一行：

[css] view plain copy
  1. .main-wrap {    margin: 0 230px 0 190px;}  

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

[css] view plain copy
  1. .extra {          
  2.             float: left;          
  3.             width: 230px;          
  4.             margin-left: -100%;          
  5.             position: relative;          
  6.              left: 190px;      
  7.          }      
  8. .main-wrap {          
  9.                   margin-left: 430px;     
  10.                  }  

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

[html] view plain copy
  1. <html><head>  
  2. <meta http-equiv="content-type" content="text/html; charset=utf-8">      
  3. <title>PE Layout Example 4</title>  
  4. <style type="text/css">  
  5.     body { font: 22px/1.5 Georgia, sans-serif; color: #333; min-width: 500px; }  
  6.     a { outline: none; text-decoration: none; color: #8CD0D3; }  
  7.     a:visited { color: #8CD0D3; }  
  8.     pre { font: 12px 'Courier New', monospace; }  
  9.   
  10.     .main { background: #D6D6D6; }  
  11.     .sub { background: #E79F6D; }  
  12.     .extra { background: #77BBDD; }  
  13.   
  14.     #hd, #ft {  
  15.         height: 50px;  
  16.         background: #666; color: #eee;  
  17.         text-align: center;  
  18.     }  
  19.     #ft { height: 40px; }  
  20.   
  21.     /* core layout css */  
  22.     .main {  
  23.         float: left;  
  24.         width: 100%;  
  25.     }  
  26.     .sub {  
  27.         float: left;  
  28.         width: 190px;  
  29.         margin-left: -100%;  
  30.     }  
  31.     .extra {  
  32.         float: left;  
  33.         width: 230px;  
  34.         margin-left: -230px;  
  35.     }  
  36.     .main, .sub, .extra {  
  37.         padding-bottom: 5000px;  
  38.         margin-bottom: -5000px;  
  39.     }  
  40.   
  41.     .main-wrap {  
  42.         margin: 0 230px 0 190px;  
  43.     }  
  44.       
  45.   
  46.     #bd { overflow: hidden; _zoom: 1; }  
  47.   
  48. </style>  
  49. </head>  
  50. <body>  
  51.   
  52. <div id="page2">  
  53.     <div id="hd">  
  54.         <p>Header</p>  
  55.     </div>  
  56.     <div id="bd">  
  57.         <div class="main">  
  58.             <div class="main-wrap">  
  59.                 <p>Main</p>  
  60.                 <pre>.main {  
  61.     float: left;  
  62.     width: 100%;  
  63. }  
  64. .main-wrap {  
  65.     margin: 0 230px 0 190px;  
  66. }  
  67.                 </pre>  
  68.             </div>  
  69.         </div>  
  70.         <div class="sub">  
  71.             <p>Sub</p>  
  72.             <pre>.sub {  
  73.     float: left;  
  74.     width: 190px;  
  75.     margin-left: -100%;  
  76. }  
  77.             </pre>  
  78.         </div>  
  79.         <div class="extra">  
  80.             <p>Extra</p>  
  81.             <pre>.extra {  
  82.     float: left;  
  83.     width: 230px;  
  84.     margin-left: -230px;  
  85. }  
  86.             </pre>  
  87.         </div>  
  88.     </div>  
  89.     <div id="ft">  
  90.         <p>Footer</p>  
  91.     </div>  
  92. </div>  
  93.   
  94.   
  95.   
  96. </body></html>  
[html] view plain copy
  1. 转载：http://www.cnblogs.com/cobby/archive/2012/05/09/2491812.html 

还可参考：http://blog.csdn.net/magic_fx/article/details/44876891

（由圣杯布局到双飞翼布局引发的思考）

lijunlinlijunlin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
理解双飞翼布局
99的博客
07-05 750
双飞翼布局主要解决俩问题：1、三列布局，中间宽度自适应，两边定宽； 2、中间栏要在浏览器中优先展示渲染。 在css布局中，有三种技术是经常被使用的： （1）浮动 （float） （2）负边距 （negative margin） （3）定位 （position） 这是实现布局的三个最基本的原子技术。只要巧妙组合，并加以灵活运用，就能“拼”出各种布局的实现方案。 如果三列布局不
圣杯布局 VS 双飞翼布局
子非魚
03-30 860
作为前端开发者，布局都应该已经写了不少了，但很多时候我们实现布局的思路可能都不一定正确或者不是最合适的。要想自己的布局水平有所提高，两个经典的布局： 圣杯布局 和 双飞翼布局，我个人觉得还是很有必要掌握的。
CSS布局之--淘宝双飞翼布局
weixin_30505751的博客
01-27 103
淘宝的页面布局中，最经典的应该是它的 【子列】 【主列】 【附加列】这三个概念。通过查看淘宝店铺页面的DOM结构及其CSS可以发现：淘宝使用的左中右三列布局采用的方式与我们平常有很大差别。一般我们是下面这种做法： <div class="sub">子列</div> <div class="main">主列</div> <div c...
玉伯提出的“双飞翼布局”介绍
weixin_30735391的博客
05-23 97
仔细分析各种布局的技术实现，可以发现下面三种技术被经常使用： 浮动 float 负边距 negative margin 相对定位 relative position 这是实现布局的三个最基本的原子技术。只要巧妙组合，并加以灵活运用，就能“拼”出各种布局的实现方案。 尝试之路 考虑以下DOM结构： <div id="page"> <div id="h...
双飞翼布局浅析
whiteGay的博客
10-17 269
【原】 第一篇介绍了圣杯布局，由此衍生了另一个效果相同、结构稍有不同的布局结构——双飞翼布局。 因为两种布局结构非常相似(略有不同)，为了不弄混淆，便于区分，没有将它们写在一篇。更加便于理解，思路更加...
浅谈css双飞翼布局和圣杯布局
09-24
为了克服圣杯布局中宽度控制复杂和布局局限性的问题，淘宝UED提出了双飞翼布局。双飞翼布局和圣杯布局的基本思路类似，但在布局细节上做了一些简化。双飞翼布局通过在主内容区内再嵌套一个div元素（内层div常被称为...
你不知道的三列布局之圣杯布局和双飞翼布局（超详细）
yjf1060521866的博客
04-27 1864
前言 三列布局相信大家都见过，像上面淘宝、豆瓣等很多平台界面都有使用。他们用到的是圣杯布局和双飞翼布局。圣杯布局和双飞翼布局是一些大厂可能问的问题，圣杯布局与双飞翼布局针对的都是三列左右栏固定中间栏边框自适应的网页布局（想象一下圣杯是主体是加上两个耳朵；鸟儿是身体加上一对翅膀），圣杯布局是Kevin Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师（传说是玉伯）改进并传播开来，在中国也有叫法是双飞翼布局。在讲这两种布局之前，我们还可以思考一下还有什么方法能做到三列布局吗
圣杯布局和双飞翼布局是什么
YumEllen的博客
02-16 247
圣杯布局和双飞翼布局 是什么 圣杯布局和双飞翼布是左右两栏固定宽度，中间部分自适应的三栏布局，并且要求中间栏要优先渲染。 圣杯布局是歪果仁提出的，双飞翼布局是圣杯布局的优化版，由淘宝UED提出。它们的效果图类似，但是在解决”中间栏div内容不被遮挡“问题上的实现方法不同。效果图： 圣杯布局 代码： <!--html--> <div class="container"> ...
CSS经典多栏布局（多列自适应布局、等高布局、圣杯布局、双飞翼布局）
weixin_45457515的博客
08-01 756
一、多列自适应布局 自适应: 盒子宽度随着屏幕宽度发生变化 百分比 1:两列自适应布局 要求:左侧盒子固定,右侧盒子100% 左侧盒子加左浮动属性 ===>浮动元素会覆盖标准盒子 2: 三列自适应布局 左右两侧固定宽度,中间盒子自适应 技术点: 负外边距 margin-left:-px + 相对定位 (left-,right-)+ 浮动并排 二、等高布局 hei...
CSS中经典的双飞翼布局(
liwusen的博客
05-09 5652
经典的兼容性好的双飞翼布局，中间列自适应，左右两列固定宽度的布局，如何实现，以及优点等
圣杯布局和双飞翼布局
m0_62558365的博客
04-27 373
圣杯布局和双飞翼布局圣杯布局 圣杯布局 一、组成：header，left，center，right，footer 二、要求： header和footer各自占领屏幕所有宽度，高度固定 中间的container是一个三栏布局 三栏布局两侧宽度固定不变，中间部分自动填充整个区域 中间部分的高度是三栏中最高的区域的高度 三、实现方式： 1.浮动 创建header，container(left，center，right，先定义center)，footer 定义header和footer的样式，使之横向铺满，同
圣杯布局基础
m0_61282942的博客
07-30 97
圣杯布局和双飞翼布局一直是前端面试的高频考点，圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章 《In Search of the Holy Grail》。 比起双飞翼布局，它的起源不是源于对页面的形象表达。在西方，圣杯是表达“渴求之物”的意思。而双飞翼布局则是源于淘宝的UED，可以说是灵感来自于页面渲染。效果图 原本录制了一个小视频，奈何不能上传到博客中，视频中通过缩放页面可以发现随着页面的宽度的变化，这三栏布局是中间盒子优先渲染，两边的盒子框子宽度固定不
经典布局-双飞翼
东东爱编码博客
06-09 495
文章目录一、双飞翼布局1. 具体实现 一、双飞翼布局 产生的背景： 针对圣杯布局的缺点，淘宝的工程署们提出了双飞翼布局，原理：在中间区域加一层dom节点，然后添加左右margin，实现三栏布局。 1. 具体实现 代码骨架： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=
css经典布局——圣杯布局
热门推荐
越努力，越幸运！
01-18 5万+
圣杯布局和双飞翼布局一直是前端面试的高频考点，圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章《In Search of the Holy Grail》。比起双飞翼布局，它的起源不是源于对页面的形象表达。在西方，圣杯是表达“渴求之物”的意思。而双飞翼布局则是源于淘宝的UED，可以说是灵感来自于页面渲染。 效果图 原本录制了...
三栏布局之圣杯和淘宝双飞翼布局
yq_giveYouMoney的博客
01-17 176
三栏布局 三栏布局也就是两边宽度固定，中间自适应；中间栏要放在文档流中优先渲染，那就得先写中间栏的dom结构 圣杯布局 代码如下： <!-- style样式 --> <style> .fl { float: left; height: 200px; } .container { padding: 0 200px 0 150px; } .middle { wi...
页面布局——三栏布局、圣杯和双飞翼布局
yaocong1993的博客
03-08 523
圣杯布局来自于文章In Search of the Holy Grail，双飞翼布局源于淘宝的UED。 圣杯和双飞翼布局是同一种布局的不同实现方式，实现的都是三栏布局、两边盒子宽度固定、中间盒子自适应（固比固布局），且中间盒子优先渲染，任何一列都可以最高。 解决方案大体相同，都是三栏全部float:left浮动，区别在于解决中间栏div的内容不被遮挡上，圣杯布局是中间栏在添加相对定位，并配合l...
圣杯布局、双飞翼布局、Flex布局、绝对定位布局总结
weixin_43413602的博客
05-03 687
圣杯布局、双飞翼布局、Flex布局、绝对定位布局总结 1、圣杯布局 页面结构：两边的边栏宽度固定，中间的主体在一定范围内自适应，主体优先被加载出来（写代码的时候把主体部分放上面），就是在一定范围内，缩小窗口，侧边栏不会缩小，中间的主体适当的缩小。 为了防止页面缩放的太小，影响浏览，一般会为页面设置最小宽度min-width。 HTML代码： <!DOCTYPE html> <...
圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例
wangchengiii的博客
09-10 4万+
题目要求：针对如下DOM结构，编写CSS，实现三栏水平布局，其中left、right分别位于左右两侧，left宽度为200px，right宽度为300px，main处在中间，宽度自适应。 要求：允许增加额外的DOM节点，但不能修改现有节点顺序。 <div class="container"> 　　<div class="main">main</div> 　　<div class="
JavaScript：淘宝UED探索其无限潜力
"淘宝前端团队分享的关于...淘宝前端UED团队的这份资料详细介绍了JavaScript的核心概念，对于想要深入理解JavaScript的开发者来说是一份宝贵的资源，它不仅帮助开发者了解语言特性，还能通过实例提升实际编程技能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值