[关闭]
@xudongh 2016-11-05T23:32:41.000000Z 字数 3347 阅读 3391

圣杯布局的实现原理

前端开发

圣杯布局是一种非常经典和常用的布局方式，其所指的是三列布局，中间宽度自适应，两边定宽；或者两列布局，主体宽度自适应，左边或右边定宽。

下面主要拿三列的圣杯布局进行分析。

image_1b0qgghq21p6513d610241n1f1nv99.png-6.5kB

  1. <body>
  3.     <div id="hd">头部</div>
  5.     <div class="container">   
  6.         <div class="main">    //主内容栏
  7.             <p>主内容栏自适应宽度</p> 
  8.         </div>
  10.         <div class="left">    //左边栏
  11.             <p>侧边栏1固定宽度</p>
  12.         </div>
  14.         <div class="right">   //右边栏
  15.             <p>侧边栏2固定宽度</p>
  16.         </div>
  17.     </div>
  19.     <div id="ft">底部</div>
  21. </body>
  1. .mian {
  2.     background-color: #03a9f4;
  3.     float: left;
  4.     width:100%;
  5. }
  6. .left {
  7.     background-color: #00bcd4;
  8.     float: left;
  9.     width: 200px;
  10. }
  11. .right{
  12.     background-color: #00bcd4;
  13.     float: left;
  14.     width: 200px;
  15. }

image_1b0qh7eh315gcaasn9u405medm.png-7.9kB

  1. .mian {
  2.     background-color: #03a9f4;
  3.     float: left;
  4.     width:100%;
  5.     padding-left: 210px;
  6. }
  7. .left {
  8.     background-color: #00bcd4;
  9.     float: left;
  10.     width: 200px;
  11.     margin-left: -100%;
  12. }

image_1b0qhgae611q1s1r18ngat52tq13.png-7.9kB

  1. .left {
  2.     background-color: #00bcd4;
  3.     float: left;
  4.     width: 200px;
  5.     margin-left: -100%;
  6.     position: relative;
  7.     left: 210px;
  8. }

image_1b0qhjsja11pg16ugfnv1tjf15bj1g.png-7.8kB

  1. .mian {
  2.     background-color: #03a9f4;
  3.     float: left;
  4.     width:100%;
  5.     padding-left: 210px;
  6.     padding-right: 210px;
  7. }
  8. .right {
  9.     float: left;
  10.     width: 200px;
  11.     margin-left: -200px;
  12.     position: relative;
  13.     right: -210px;
  14. }

image_1b0qho90c6779ct7ig1s5o3ek1t.png-6.6kB

以下圣杯布局各种布局方式的demo：
image_1b0qhrq7p193jok71ctd1ouu5a02a.png-18.6kB

代码如下：

  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>
  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;}
  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%*/
  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.     }
  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 */
  49.         position:relative;
  50.         right:-210px; /* = -parantNode.paddingRight */
  51.     }
  52.     .bd-rgt .main {
  53.         float:left;
  54.         width:100%;
  55.     }
  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%;
  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;
  83.         position:relative;
  84.         right: -210px;
  85.     }
  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%;
  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%;
  111.         position:relative;
  112.         left: -210px;
  113.         _left: 210px; /*IE6 hack*/
  114.     }
  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;
  131.         position:relative;
  132.         right: -210px;
  133.     }
  134.     .bd-3-rr .aside-2 {
  135.         float: left;
  136.         width:200px;
  137.         margin-left: -200px;
  139.         position:relative;
  140.         right: -420px;
  141.     }
  144.     </style>
  146. </head>
  147. <body>
  149.     <div id="hd">头部</div>
  151.     <div class="bd-3-lr">
  152.         <div class="main">
  153.             <p>主内容栏自适应宽度</p>
  154.         </div>
  156.         <div class="aside-1">
  157.             <p>侧边栏1固定宽度</p>
  158.         </div>
  160.         <div class="aside-2">
  161.             <p>侧边栏2固定宽度</p>
  162.         </div>
  163.     </div>
  167.     <div id="ft">底部</div>
  169. </body>
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注