深入理解圣杯布局和双飞翼布局

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了深入理解圣杯布局和双飞翼布局相关的知识，希望对你有一定的参考价值。

参考技术A

圣呗布局和双飞翼布局从字面意思来看是这样的：

通俗的来说就是左右两栏固定宽度，中间部分自适应的三栏布局。

把整个页面的宽度收缩后，会出现布局错乱的效果，因为当页面收缩时，main因为是其父容器content的100%的宽度，所以main也会跟着收缩，当main收缩到比aside宽度还要小，这时候父容器ct的100%宽度<aside的宽度，就不能容纳aside，所以将其挤到了下一行。

解决方法 ：可以给父容器content加上一个min-width样式，min-width的值不能小于aside和extra两者间的宽度最大值，这样做可以使中间的main的宽度始终比extra和aside大，就不会导致布局错乱了。

圣杯布局和双飞翼布局的实现过程

相信很多人都搜过圣杯布局和双飞翼布局，也知道他们的由来，在这里我就不一一赘述了，今天主要讲的是当我遇到两个布局时，我是怎样一步一步从开始到实现的过程，例如：刚开始我也不懂为什么圣杯布局和双飞翼布局的区别，不懂圣杯布局为什么会有相对定位等一些问题，在这里给大家讲下我的理解，如有错误，欢迎批评指正。
好了，接下来开始今天的写文章之旅！
 
圣杯布局和双飞翼布局实现的问题都是三列布局，两边定宽，中间自适应布局，要注意的是中间栏(重要的东西)要在放在文档流前面以优先渲染。
 
圣杯布局
1、首先定义三列，为它们设置简单的css样式，代码如下：
[html] view plain copy
 
  1. <!-- 圣杯布局 -->  
  2. <!DOCTYPE html>  
  3. <html>  
  4. <head>  
  5. <style>        
  6.        .left{  
  7.             background: #E79F6D;  
  8.             width:150px;  
  9.             float:left;  
  10.         }  
  11.         .main{  
  12.             background: #D6D6D6;  
  13.             width:100%;  
  14.             float:left;   
  15.         }  
  16.         .right{  
  17.             background: #77BBDD;  
  18.             width:190px;  
  19.             float:left;  
  20.         }  
  21. </style>  
  22. </head>  
  23.     <body>  
  24.     <div class="con">  
  25.             <div class="main">Main</div>  
  26.         <div class="left">Left</div>  
  27.             <div class="right">Right</div>  
  28.     </div>  
  29.     </body>  
  30. </html>  
 
实现效果图：技术分享图片
这就是普通的让三个div左浮动显示出来的效果；
 
2、我们让Left和Right与main在同一排，这里需要用到margin-left的负值，这里如果margin-left是负值，我理解的是在此基础上往左边移，设置Left的margin-left:-100%，也就是往左移main的整个宽度，这时Left的左边缘跟main的左边缘重叠，即Left的150px宽覆盖住了main的150px宽；技术分享图片
这时Right跑到左边了，再对Right设置margin-left:-190px;即right也跑到上面去了，Right的右边缘和main的右边缘对齐，Right的宽度覆盖了main的右边的宽度；现在Left和Right都跑上面去了，但是需要注意的是main的值不见了，因为它被覆盖了，设置left和right的margin值只是改变Left和Right的位置，对于main来说还是在以前的位置上，接下来要考虑的问题就是如何定位main的位置？技术分享图片
 
3、需要给con容器加padding值，padding值的作用是给这整个容器均移动padding值，如在刚开始Left和Right没上移的时候，给con加padding值的效果如下：
技术分享图片
 
 
现在在Left和Right以及main都在同一排的情况下，加padding的值，就把main的定位到合适的位置了，但是这时的问题是：Left和Right也跟着一起缩了，所以要把Left和Right定位带之前的位置，该怎么定位呢？
 
4、这时Left和Right需要用到css 的left属性了，left 属性规定元素的左边缘,该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。注意使用属性left的时候要给这个元素定位，绝对定位和相对定位都可以，如果不使用定位的话没有效果，具体为什么我也不知道，大家可以自行百度。
Left的css样式加上：position:relative;left：-150px;  同理css的right属性也是如此，position:relative;right:-190px;  Left和Right回到它们各自的位置上，OK，完成圣杯的布局，效果图贴上：
技术分享图片
 
 
完整代码：
[html] view plain copy
 
  1. <!-- 圣杯布局 -->  
  2. <!DOCTYPE html>  
  3. <html>  
  4. <head>  
  5. <style>        
  6.         .con {  
  7.             padding-left: 150px;  
  8.         padding-right: 190px;  
  9.         }  
  10.         .left{  
  11.             background: #E79F6D;  
  12.             width:150px;  
  13.             float:left;  
  14.             margin-left: -100%;  
  15.             position: relative;  
  16.             left:-150px;  
  17.         }  
  18.         .main{  
  19.             background: #D6D6D6;  
  20.             width:100%;  
  21.             float:left;   
  22.         }  
  23.         .right{  
  24.             background: #77BBDD;  
  25.             width:190px;  
  26.             float:left;  
  27.             margin-right: -190px;  
  28.             position: relative;  
  29.             right: -190px;  
  30.         }  
  31.   
  32. </style>  
  33.   
  34. </head>  
  35.     <body>  
  36.     <div class="con">  
  37.             <div class="main">Main</div>  
  38.         <div class="left">Left</div>  
  39.             <div class="right">Right</div>  
  40.     </div>  
  41.     </body>  
  42. </html>  
 
 
双飞翼布局
双飞翼布局可以看成是对圣杯布局的改进，因为圣杯布局用到的标签属性较多，用着也较麻烦，所以淘宝玉伯大大就提出来双飞翼的布局，双飞翼是把三列布局比作鸟，中间栏是鸟身，两边宽是鸟的两翼，重要的是鸟的身体摆好，再安两翼。思路和圣杯布局一样，这里我还是以上一个作例子，用到main，left，right（其实用main  sub  extra更形象）。前两步都是一样的，重要的是第三步，在前两步的完成后已经形成同行排列，只不过main值被覆盖了，圣杯布局的第三步是给con容器添加padding属性，而双飞翼布局是为main里面的内容再加一个div，让main的内容包含在内层div里，
[html] view plain copy
 
  1. <body>  
  2.     <div class="con">  
  3.              <div class="main">  
  4.                 <div class="mc">Main</div>  
  5.               </div>  
  6.             <div class="left">Left</div>  
  7.             <div class="right">Right</div>  
  8.     </div>  
  9.     </body>  
这时，只要设置mc的margin属性就可以实现三列布局了，而且main也正常显示；这里，不用设置con容器的padding属性，也不用给Left和Right运用left，right属性，因为设置padding属性就是为了不覆盖main的值，现在将main里的内容放在一个div里，再为它设置margin属性，也就实现了不遮挡main里面的内容值，因此双飞翼布局使用属性个数减少，看着更简便。代码如下：
[html] view plain copy
 
  1. <!-- 双飞翼布局 -->  
  2. <!DOCTYPE html>  
  3. <html>  
  4. <head>  
  5. <style>        
  6.         .left{  
  7.             background: #E79F6D;  
  8.             width:150px;  
  9.             float:left;  
  10.             margin-left: -100%;  
  11.         }  
  12.         .main{  
  13.             background: #D6D6D6;  
  14.             width:100%;  
  15.             float:left;   
  16.         }  
  17.         .mc {  
  18.             margin-left: 150px;  
  19.         }  
  20.         .right{  
  21.             background: #77BBDD;  
  22.             width:190px;  
  23.             float:left;  
  24.             margin-right: -190px;  
  25.         }  
  26.   
  27. </style>  
  28.   
  29. </head>  
  30.     <body>  
  31.     <div class="con">  
  32.             <div class="main">  
  33.                 <div class="mc">Main</div>  
  34.             </div>  
  35.             <div class="left">Left</div>  
  36.             <div class="right">Right</div>  
  37.     </div>  
  38.     </body>  
  39. </html>  

OK，两个布局的过程讲解结束，谢谢大家，欢迎大家批评指正！

以上是关于深入理解圣杯布局和双飞翼布局的主要内容，如果未能解决你的问题，请参考以下文章

CSS布局之圣杯布局和双飞翼布局

圣杯布局和双飞翼布局的实现过程

解析双飞翼布局

圣杯布局，双飞翼布局详解

圣杯布局和双飞翼布局

经典三栏布局之圣杯双飞翼弹性布局