首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

CSS的三列式"圣杯布局"方案完全解析

所属分类： 网页制作 / CSS 阅读数： 1764
收藏 0 赞 0 分享

圣杯布局源自 Matthew Levine 在06年的一篇文章，其DOM结构如下：

XML/HTML Code复制内容到剪贴板
  1. <div class="container">  
  2.     <div class="main"></div>  
  3.  <div class="sub"></div>  
  4.  <div class="extra"></div>  
  5. </div>  

流程解说
接下来，让我们一步一步地实现圣杯布局；

1、 首先分别浮动main、sub、extra三列， 然后利用负外边距把sub列和extra列定位到左右两边。这时的CSS代码如下：

CSS Code复制内容到剪贴板
  1. .main {   
  2.  float: left;   
  3.  width: 100%;   
  4.  height: 300px;   
  5.  background-color: rgba(255, 0, 0, .5);   
  6. }   
  7. .sub {   
  8.  float: left;   
  9.  width: 200px;   
  10.  height: 300px;   
  11.  margin-left: -100%;   
  12.  background-color: rgba(0, 255, 0, .5);   
  13. }   
  14. .extra {   
  15.  float: left;   
  16.  width: 180px;   
  17.  height: 300px;   
  18.  margin-left: -180px;   
  19.  background-color: rgba(0, 0, 255, .5);   
  20. }  

2、 完成上步后，sub和extra列已经到了正确的位置，但是sub和extra列却覆盖了main的两边，对于这个问题，圣杯布局的解决办法是给容器container添加左、右内边距，从而让main列定位到正确的位置。

CSS Code复制内容到剪贴板
  1. .container {   
  2.  padding-left: 210px;   
  3.  padding-right: 190px;   
  4. }  

3、 完成第二步后又出现了新问题：sub、extra列也受到容器左右内边距的影响位置发生了移动。为了解决这个问题，圣杯布局使用相对定位使sub、extra列回到正确的位置。新添加代码如下：

CSS Code复制内容到剪贴板
  1. .sub {   
  2.  position: relative;   
  3.  left: -210px;   
  4. }   
  5. .extra {   
  6.  position: relative;   
  7.  rightright: -190px;   
  8. }  

4、 当浏览器缩小到一定程度时，这个布局可能会被破坏，可以在body上添加min-width属性解决。最终的圣杯布局CSS代码如下：

CSS Code复制内容到剪贴板
  1. body {   
  2.  min-width: 600px; /* 2*sub + extra */  
  3. }   
  4. .container {   
  5.  padding-left: 210px;   
  6.  padding-right: 190px;   
  7. }   
  8. .main {   
  9.  float: left;   
  10.  width: 100%;   
  11.  height: 300px;   
  12.  background-color: rgba(255, 0, 0, .5);   
  13. }   
  14. .sub {   
  15.  position: relative;   
  16.  left: -210px;   
  17.  float: left;   
  18.  width: 200px;   
  19.  height: 300px;   
  20.  margin-left: -100%;   
  21.  background-color: rgba(0, 255, 0, .5);   
  22. }   
  23. .extra {   
  24.  position: relative;   
  25.  rightright: -190px;   
  26.  float: left;   
  27.  width: 180px;   
  28.  height: 300px;   
  29.  margin-left: -180px;   
  30.  background-color: rgba(0, 0, 255, .5);   
  31. }  

点击查看在线demo

完整实例
效果如下：
201662115852310.png (900×465)

CSS 和 DOM 代码如下：

CSS Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html>   
  3. <head>   
  4.     <meta charset="utf-8">   
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">   
  6.     <title>圣杯布局</title>   
  7.   
  8.     <style type="text/css">   
  9.     body {background-color: #ffffff; font-size:14px;}   
  10.     #hd, #ft {padding:20px 3px; background-color: #cccccc; text-align: center;}   
  11.     .bd-lft, .bd-rgt, .bd-3-lr, .bd-3-ll, .bd-3-rr {margin:10px 0; min-width:400px;}   
  12.     .main {background-color: #03a9f4; color:#ffffff;}   
  13.     .aside, .aside-1, .aside-2 {background-color: #00bcd4; color:#ffffff;}   
  14.     p {margin:0; padding:20px; text-align: center;}   
  15.        
  16.        
  17.     /* 左侧栏固定宽度，右侧自适应 */  
  18.     .bd-lft {   
  19.         zoom:1;   
  20.         overflow:hidden;   
  21.         padding-left:210px;   
  22.     }   
  23.     .bd-lft .aside {   
  24.         float:left;   
  25.         width:200px;   
  26.         margin-left:-100%; /*= -100%*/  
  27.   
  28.         position:relative;   
  29.         left:-210px; /* = -parantNode.paddingLeft */  
  30.         _left: 0; /*IE6 hack*/  
  31.     }   
  32.     .bd-lft .main {   
  33.         float:left;   
  34.         width:100%;   
  35.     }   
  36.   
  37.   
  38.     /* 右侧栏固定宽度，左侧自适应 */  
  39.     .bd-rgt {   
  40.         zoom:1;   
  41.         overflow:hidden;   
  42.         padding-right:210px;   
  43.     }   
  44.     .bd-rgt .aside {   
  45.         float:left;   
  46.         width:200px;   
  47.         margin-left:-200px; /* = -this.width */  
  48.   
  49.         position:relative;   
  50.         rightright:-210px; /* = -parantNode.paddingRight */  
  51.     }   
  52.     .bd-rgt .main {   
  53.         float:left;   
  54.         width:100%;   
  55.     }   
  56.   
  57.   
  58.     /* 左中右 三栏自适应 */  
  59.     .bd-3-lr {   
  60.         zoom:1;   
  61.         overflow:hidden;   
  62.         padding-left:210px;   
  63.         padding-right:210px;   
  64.     }   
  65.     .bd-3-lr .main {   
  66.         float:left;   
  67.         width:100%;   
  68.     }   
  69.     .bd-3-lr .aside-1 {   
  70.         float: left;   
  71.         width:200px;   
  72.         margin-left: -100%;   
  73.   
  74.         position:relative;   
  75.         left: -210px;   
  76.         _left: 210px; /*IE6 hack*/  
  77.     }   
  78.     .bd-3-lr .aside-2 {   
  79.         float: left;   
  80.         width:200px;   
  81.         margin-left: -200px;   
  82.   
  83.         position:relative;   
  84.         rightright: -210px;   
  85.     }   
  86.   
  87.     /* 都在左边，右侧自适应 */  
  88.     .bd-3-ll {   
  89.         zoom:1;   
  90.         overflow:hidden;   
  91.         padding-left:420px;   
  92.     }   
  93.     .bd-3-ll .main {   
  94.         float:left;   
  95.         width:100%;   
  96.     }   
  97.     .bd-3-ll .aside-1 {   
  98.         float: left;   
  99.         width:200px;   
  100.         margin-left: -100%;   
  101.   
  102.         position:relative;   
  103.         left: -420px;   
  104.         _left: 0px; /*IE6 hack*/  
  105.     }   
  106.     .bd-3-ll .aside-2 {   
  107.         float: left;   
  108.         width:200px;   
  109.         margin-left: -100%;   
  110.   
  111.         position:relative;   
  112.         left: -210px;   
  113.         _left: 210px; /*IE6 hack*/  
  114.     }   
  115.   
  116.     /* 都在右边，左侧自适应 */  
  117.     .bd-3-rr {   
  118.         zoom:1;   
  119.         overflow:hidden;   
  120.         padding-right:420px;   
  121.     }   
  122.     .bd-3-rr .main {   
  123.         float:left;   
  124.         width:100%;   
  125.     }   
  126.     .bd-3-rr .aside-1 {   
  127.         float: left;   
  128.         width:200px;   
  129.         margin-left: -200px;   
  130.   
  131.         position:relative;   
  132.         rightright: -210px;   
  133.     }   
  134.     .bd-3-rr .aside-2 {   
  135.         float: left;   
  136.         width:200px;   
  137.         margin-left: -200px;   
  138.   
  139.         position:relative;   
  140.         rightright: -420px;   
  141.     }   
  142.   
  143.   
  144.     </style>   
  145.   
  146. </head>   
  147. <body>   
  148.   
  149.     <div id="hd">头部</div>   
  150.        
  151.     <div class="bd-lft">   
  152.         <div class="main">   
  153.             <p>主内容栏自适应宽度</p>   
  154.         </div>   
  155.   
  156.         <div class="aside">   
  157.             <p>侧边栏固定宽度</p>   
  158.         </div>   
  159.     </div>   
  160.   
  161.     <div class="bd-rgt">   
  162.         <div class="main">   
  163.             <p>主内容栏自适应宽度</p>   
  164.         </div>   
  165.   
  166.         <div class="aside">   
  167.             <p>侧边栏固定宽度</p>   
  168.         </div>   
  169.     </div>   
  170.   
  171.     <div class="bd-3-lr">   
  172.         <div class="main">   
  173.             <p>主内容栏自适应宽度</p>   
  174.         </div>   
  175.   
  176.         <div class="aside-1">   
  177.             <p>侧边栏1固定宽度</p>   
  178.         </div>   
  179.   
  180.         <div class="aside-2">   
  181.             <p>侧边栏2固定宽度</p>   
  182.         </div>   
  183.     </div>   
  184.   
  185.     <div class="bd-3-ll">   
  186.         <div class="main">   
  187.             <p>主内容栏自适应宽度</p>   
  188.         </div>   
  189.   
  190.         <div class="aside-1">   
  191.             <p>侧边栏1固定宽度</p>   
  192.         </div>   
  193.   
  194.         <div class="aside-2">   
  195.             <p>侧边栏2固定宽度</p>   
  196.         </div>   
  197.     </div>   
  198.   
  199.     <div class="bd-3-rr">   
  200.         <div class="main">   
  201.             <p>主内容栏自适应宽度</p>   
  202.         </div>   
  203.   
  204.         <div class="aside-1">   
  205.             <p>侧边栏1固定宽度</p>   
  206.         </div>   
  207.   
  208.         <div class="aside-2">   
  209.             <p>侧边栏2固定宽度</p>   
  210.         </div>   
  211.     </div>   
  212.        
  213.     <div id="ft">底部</div>   
  214.   
  215. </body>   
  216. </html>  

圣杯布局的优点总结如下：
1.使主要内容列先加载。
2.允许任何列是最高的。
3.没有额外的div。
4.需要的hack很少。

更多精彩内容其他人还在看

Opera中国的WEB标准课程

网页制作Webjx文章简介：在这篇文章里，我要向大家介绍我和其他很多人花费数月时间开发的一个课程——Web标准课程，该课程旨在向大家提供Web设计和开发的坚实基础，无论读者是谁，此教程完全免费、可访问，并且不需要预备知识。当然，我主要还
收藏 0 赞 0 分享

CSS样式表渐进增强的基本概念

网页制作Webjx文章简介：如果你挠着头想弄清楚优雅降级和渐进增强的区别，我告诉你，这是视角问题。优雅降级和渐进增强都考虑网站在各种设备的各种浏览器上如何良好运转。两者区别的关键在于它们各自关注的焦点，以及这种关注对工作流程的影响
收藏 0 赞 0 分享

简单介绍Web Developer插件制作网页

网页制作Webjx文章简介：Firefox浏览器是一个良好支持W3C标准的开放源代码的浏览器，拥有Linux/Windows/Mac版本。因为Firefox浏览器良好支持W3C标准，所以使用Firefox来调试网页是非常好的。 Firefox浏览器是
收藏 0 赞 0 分享

CSS布局带来的巨大影响:CSS display属性值

网页制作Webjx文章简介：网页元素应用上那些与表格相关的display属性值后，能够模仿出与表格相同的特性。我将会在该文中给大家演示这种方法给CSS布局带来的巨大影响。 应原书编辑要求，先在文章顶部给出链接：《Everything You
收藏 0 赞 0 分享

用div css模拟表格对角线

这只是探讨一种CSS模拟表格对角线的用法，实际在工作中可能觉得这样做有点小题大作，这不是本主题讨论的重点。如果对此深以为然的朋友，请一笑过之 首先声明： 这只是探讨一种CSS模拟表格对角线的
收藏 0 赞 0 分享

IE Firefox在css中的差别 (部分)

1、单位问题 问题：任何距离的数值ie可以不加单位，ff必须要求写单位（0除外） 解决：写全单位如padding:0px; 2、水平居中 问题：div里的内容，ie默认为center，而ff默认left 解决：mairgin:0px auto; 3、高度问题
收藏 0 赞 0 分享

不用js可以实现信息提示效果

[code] <style> body { font:verdena; font-size:14px; color:#000 } h1{ font:verdena; font-size:22px; color:#000 } h2{ font:verdena;
收藏 0 赞 0 分享

CSS解决未知高度的垂直水平居中自适应问题

今天有人问起，晚上试着写出来，供参考； 以下代码兼容主流浏览器IE6、IE7、Firefox、Opera。 从最简单的开始………… 一、如何让一个DIV水平居中？ 这个简单不作过多说明！ [code] <st
收藏 0 赞 0 分享

CSS cursor 属性 -- 鼠标指针样式效果

取值: [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize |
收藏 0 赞 0 分享

css 简单区别ie6,ie7,firefox的写法

同一样式里可以这样 [code] margin:17px; FF +margin:17px; IE6 IE7 _margin:17px; IE6 [/code] 按这个顺序，刚好区分开三个浏览器
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 www.zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22