CSS布局实例

关注公众号 jb51net

关闭
网页制作 > CSS > CSS布局实例 >

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.  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很少。