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

Posted honghebin

tags:

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

相信很多人都搜过圣杯布局和双飞翼布局,也知道他们的由来,在这里我就不一一赘述了,今天主要讲的是当我遇到两个布局时,我是怎样一步一步从开始到实现的过程,例如:刚开始我也不懂为什么圣杯布局和双飞翼布局的区别,不懂圣杯布局为什么会有相对定位等一些问题,在这里给大家讲下我的理解,如有错误,欢迎批评指正。
好了,接下来开始今天的写文章之旅!
 
圣杯布局和双飞翼布局实现的问题都是三列布局,两边定宽,中间自适应布局,要注意的是中间栏(重要的东西)要在放在文档流前面以优先渲染。
 
圣杯布局
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,两个布局的过程讲解结束,谢谢大家,欢迎大家批评指正!

以上是关于圣杯布局和双飞翼布局的实现过程的主要内容,如果未能解决你的问题,请参考以下文章

双飞翼布局以及圣杯布局

圣杯布局与双飞翼布局

圣杯布局与双飞翼布局

圣杯布局与双飞翼布局

圣杯布局与双飞翼布局

三栏布局实现方式优缺点总结(圣杯和双飞翼重点)