资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/[ 好文分享 ] CSS布局终极方案之--圣杯布局（兼容IE6+，现代浏览器）

[ 好文分享 ] CSS布局终极方案之--圣杯布局（兼容IE6+，现代浏览器）

qujian / 3286人阅读

摘要：圣杯布局很好很巧妙的布局方式，每次都要翻看一下，干脆转过来转自最终效果左侧栏固定宽度，右侧自适应主内容栏自适应宽度侧边栏固定宽度右侧栏固定宽度，左侧自适应主内容栏自适应宽度侧边栏固定宽度左中右三栏

</>复制代码 
  1. 圣杯布局--很好很巧妙的布局方式，每次都要翻看一下，干脆转过来

转自：http://my.oschina.net/jsan/blog/368543

最终效果：

左侧栏固定宽度，右侧自适应

html:

</>复制代码 
  2.     
  3.         
    主内容栏自适应宽度
  4.     
  5.  
  6.     
  7.         
    侧边栏固定宽度
  8.

css:

</>复制代码 
  1. .bd-lft {
  2.     zoom:1;
  3.     overflow:hidden;
  4.     padding-left:210px;
  5. }
  6. .bd-lft .aside {
  7.     float:left;
  8.     width:200px;
  9.     margin-left:-100%; /*= -100%*/
  10.  
  11.     position:relative;
  12.     left:-210px; /* = -parantNode.paddingLeft */
  13.     _left: 0; /*IE6 hack*/
  14. }
  15. .bd-lft .main {
  16.     float:left;
  17.     width:100%;
  18. }
右侧栏固定宽度，左侧自适应

html:

</>复制代码 
  2.     
  3.         
    主内容栏自适应宽度
  4.     
  5.  
  6.     
  7.         
    侧边栏固定宽度
  8.

css:

</>复制代码 
  1. .bd-rgt {
  2.         zoom:1;
  3.         overflow:hidden;
  4.         padding-right:210px;
  5.     }
  6.     .bd-rgt .aside {
  7.         float:left;
  8.         width:200px;
  9.         margin-left:-200px; /* = -this.width */
  10.  
  11.         position:relative;
  12.         right:-210px; /* = -parantNode.paddingRight */
  13.     }
  14.     .bd-rgt .main {
  15.         float:left;
  16.         width:100%;
  17.     }
左中右 三栏自适应

html:

</>复制代码 
  2.     
  3.         
    主内容栏自适应宽度
  4.     
  5.     
  6.         
    侧边栏1固定宽度
  7.     
  8.     
  9.         
    侧边栏2固定宽度
  10.

css:

</>复制代码 
  1.  .bd-3-lr {
  2.         zoom:1;
  3.         overflow:hidden;
  4.         padding-left:210px;
  5.         padding-right:210px;
  6.     }
  7.     .bd-3-lr .main {
  8.         float:left;
  9.         width:100%;
  10.     }
  11.     .bd-3-lr .aside-1 {
  12.         float: left;
  13.         width:200px;
  14.         margin-left: -100%;
  15.  
  16.         position:relative;
  17.         left: -210px;
  18.         _left: 210px; /*IE6 hack*/
  19.     }
  20.     .bd-3-lr .aside-2 {
  21.         float: left;
  22.         width:200px;
  23.         margin-left: -200px;
  24.  
  25.         position:relative;
  26.         right: -210px;
  27.     }
都在左边，右侧自适应

html:

</>复制代码 
  2.     
  3.         
    主内容栏自适应宽度
  4.     
  5.  
  6.     
  7.         
    侧边栏1固定宽度
  8.     
  9.  
  10.     
  11.         
    侧边栏2固定宽度
  12.

css:

</>复制代码 
  1. .bd-3-ll {
  2.     zoom:1;
  3.     overflow:hidden;
  4.     padding-left:420px;
  5. }
  6. .bd-3-ll .main {
  7.     float:left;
  8.     width:100%;
  9. }
  10. .bd-3-ll .aside-1 {
  11.     float: left;
  12.     width:200px;
  13.     margin-left: -100%;
  14.  
  15.     position:relative;
  16.     left: -420px;
  17.     _left: 0px; /*IE6 hack*/
  18. }
  19. .bd-3-ll .aside-2 {
  20.     float: left;
  21.     width:200px;
  22.     margin-left: -100%;
  23.  
  24.     position:relative;
  25.     left: -210px;
  26.     _left: 210px; /*IE6 hack*/
  27. }
都在右边，左侧自适应

html:

</>复制代码 
  2.     
  3.         
    主内容栏自适应宽度
  4.     
  5.  
  6.     
  7.         
    侧边栏1固定宽度
  8.     
  9.  
  10.     
  11.         
    侧边栏2固定宽度
  12.

css:

</>复制代码 
  1. .bd-3-rr {
  2.     zoom:1;
  3.     overflow:hidden;
  4.     padding-right:420px;
  5. }
  6. .bd-3-rr .main {
  7.     float:left;
  8.     width:100%;
  9. }
  10. .bd-3-rr .aside-1 {
  11.     float: left;
  12.     width:200px;
  13.     margin-left: -200px;
  14.  
  15.     position:relative;
  16.     right: -210px;
  17. }
  18. .bd-3-rr .aside-2 {
  19.     float: left;
  20.     width:200px;
  21.     margin-left: -200px;
  22.  
  23.     position:relative;
  24.     right: -420px;
  25. }
最终代码： 
</>复制代码 
  2.     
  3.     
  4.     圣杯布局
  5.     
  6.     
    头部
  7.     
  8.         
  9.             
    主内容栏自适应宽度
  10.         
  11.         
  12.             
    侧边栏固定宽度
  13.         
  14.     
  15.     
  16.         
  17.             
    主内容栏自适应宽度
  18.         
  19.         
  20.             
    侧边栏固定宽度
  21.         
  22.     
  23.     
  24.         
  25.             
    主内容栏自适应宽度
  26.         
  27.         
  28.             
    侧边栏1固定宽度
  29.         
  30.         
  31.             
    侧边栏2固定宽度
  32.         
  33.     
  34.     
  35.         
  36.             
    主内容栏自适应宽度
  37.         
  38.         
  39.             
    侧边栏1固定宽度
  40.         
  41.         
  42.             
    侧边栏2固定宽度
  43.         
  44.     
  45.     
  46.         
  47.             
    主内容栏自适应宽度
  48.         
  49.         
  50.             
    侧边栏1固定宽度
  51.         
  52.         
  53.             
    侧边栏2固定宽度
  54.         
  55.     
  56.     
    底部
GPU云服务器 云服务器 圣杯布局 css布局 css布局教程 学习css布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111111.html

相关文章

  • 几种常见的CSS布局

    摘要：本文概要本文将介绍如下几种常见的布局其中实现三栏布局有多种方式，本文着重介绍圣杯布局和双飞翼布局。借助等高布局正负可解决，下文会介绍双飞翼布局特点同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。 本文概要 本文将介绍如下几种常见的布局： showImg(https://segmentfault.com/img/remote/14600000...

    FuisonDesign 评论0 收藏0

  • 几种常见的CSS布局

    摘要：本文概要本文将介绍如下几种常见的布局其中实现三栏布局有多种方式，本文着重介绍圣杯布局和双飞翼布局。借助等高布局正负可解决，下文会介绍双飞翼布局特点同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。 本文概要 本文将介绍如下几种常见的布局： showImg(https://segmentfault.com/img/remote/14600000...

    andot 评论0 收藏0

  • 几种常见的CSS布局

    摘要：本文概要本文将介绍如下几种常见的布局其中实现三栏布局有多种方式，本文着重介绍圣杯布局和双飞翼布局。借助等高布局正负可解决，下文会介绍双飞翼布局特点同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。 本文概要 本文将介绍如下几种常见的布局： showImg(https://segmentfault.com/img/remote/14600000...

    荆兆峰 评论0 收藏0

  • 前端面试之CSS总结(上)

    摘要：重点介绍一下常见的三列布局之圣杯布局和双飞翼布局。两种布局方式的不同之处在于如何处理中间主列的位置圣杯布局是利用父容器的左右内边距定位双飞翼布局是把主列嵌套在后利用主列的左右外边距定位。 CSS总结 由于最近在准备前端方面的面试，所以对自己平常工作中用到的地方做出一些总结。该篇是CSS部分(上)，有许多地方叙述的并不是十分详细，只是大致的描述一下，给自己提供一个知识轮廓。本篇中主要描述...

    琛ｈ。 评论0 收藏0

发表评论

登陆后可评论

0条评论

qujian

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<