首页 > 网页制作 > CSS

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

admin CSS 2022-02-06 16:09:47 圣杯布局   三列布局   CSS"

圣杯布局源自 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.  floatleft;   
  3.  width: 100%;   
  4.  height300px;   
  5.  background-color: rgba(255, 0, 0, .5);   
  6. }   
  7. .sub {   
  8.  floatleft;   
  9.  width200px;   
  10.  height300px;   
  11.  margin-left: -100%;   
  12.  background-color: rgba(0, 255, 0, .5);   
  13. }   
  14. .extra {   
  15.  floatleft;   
  16.  width180px;   
  17.  height300px;   
  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-left210px;   
  3.  padding-right190px;   
  4. }  

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

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

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

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

点击查看在线demo

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

CSS 和 DOM 代码如下:

CSS Code复制内容到剪贴板
  1.   
  2.   
  3.   
  4.     "utf-8">   
  5.     "X-UA-Compatible" content="IE=edge,chrome=1">   
  6.     圣杯布局   
  7.   
  8.     "text/css">   
  9.     body {background-color#fffffffont-size:14px;}   
  10.     #hd, #ft {padding:20px 3pxbackground-color#cccccctext-aligncenter;}   
  11.     .bd-lft, .bd-rgt, .bd-3-lr, .bd-3-ll, .bd-3-rr {margin:10px 0; min-width:400px;}   
  12.     .main {background-color#03a9f4color:#ffffff;}   
  13.     .aside, .aside-1, .aside-2 {background-color#00bcd4color:#ffffff;}   
  14.     p {margin:0; padding:20pxtext-aligncenter;}   
  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.         floatleft;   
  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.         floatleft;   
  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.         floatleft;   
  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.         floatleft;   
  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.         floatleft;   
  128.         width:200px;   
  129.         margin-left: -200px;   
  130.   
  131.         position:relative;   
  132.         rightright: -210px;   
  133.     }   
  134.     .bd-3-rr .aside-2 {   
  135.         floatleft;   
  136.         width:200px;   
  137.         margin-left: -200px;   
  138.   
  139.         position:relative;   
  140.         rightright: -420px;   
  141.     }   
  142.   
  143.   
  144.        
  145.   
  146.   
  147.   
  148.   
  149.     "hd">头部
  
  •        
  •     "bd-lft">   
  •         "main">   
  •             

    主内容栏自适应宽度

      
  •         
  •   
  •   
  •         "aside">   
  •             

    侧边栏固定宽度

      
  •         
  •   
  •     
  •   
  •   
  •     "bd-rgt">   
  •         "main">   
  •             

    主内容栏自适应宽度

      
  •         
  •   
  •   
  •         "aside">   
  •             

    侧边栏固定宽度

      
  •            
  •        
  •   
  •     "bd-3-lr">   
  •         "main">   
  •             

    主内容栏自适应宽度

      
  •            
  •   
  •         "aside-1">   
  •             

    侧边栏1固定宽度

      
  •            
  •   
  •         "aside-2">   
  •             

    侧边栏2固定宽度

      
  •            
  •        
  •   
  •     "bd-3-ll">   
  •         "main">   
  •             

    主内容栏自适应宽度

      
  •            
  •   
  •         "aside-1">   
  •             

    侧边栏1固定宽度

      
  •            
  •   
  •         "aside-2">   
  •             

    侧边栏2固定宽度

      
  •            
  •        
  •   
  •     "bd-3-rr">   
  •         "main">   
  •             

    主内容栏自适应宽度

      
  •            
  •   
  •         "aside-1">   
  •             

    侧边栏1固定宽度

      
  •            
  •   
  •         "aside-2">   
  •             

    侧边栏2固定宽度

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

    版权声明

    本文仅代表作者观点,不代表本站立场。
    本文系作者授权发表,未经许可,不得转载。
    本文地址:/web/CSS/77897.html

    上一篇 : CSS使用BFC规则布局引发外层div包裹内层div的处理方法
    下一篇 : 网站设计之合理架构CSS
    留言与评论(共有 0 条评论)
       
    验证码:

    热门文章

    最近发表

    标签列表

    潘少俊衡

    | 桂ICP备2023010378号-4

    Powered By EmpireCMS

    爱享小站

    中德益农

    谷姐神农

    环亚肥料

    使用手机软件扫描微信二维码

    关注我们可获取更多热点资讯

    感谢潘少俊衡友情技术支持