参考文档：

寻找圣杯：In Search of the Holy Grail

W3CN：http://www.w3cn.org/article/layout/2004/55.html

我把重要的类容拿出来说说。

这种三栏布局的目标是：

  1. 允许中间的内容先于其他出现在代码中
  2. 一个自适应适应的中心和固定宽度的侧边栏
  3. 允许任何一栏都是最高的高度
  4. 只需要额外的一个DIV标签
  5. 非常的简单的CSS代码和很少很少的HACK 补丁

传统方式：利用float 方式实现：

样式：

  1. .wrap{overflow:hidden;}
  2. .left{width:250px;float:left;background:#999;}
  3. .right{width:250px;float:right;background:#999;}
  4. .center{background:#eee; +float:left;/* ie6 hack*/ overflow:hidden;/* 删除此，ff下不能高度自适应 */}
  5. .row{margin-bottom:-10000px;padding-bottom:10000px;}
  6. .header, .footer{width:100%;background:#ccc;}

xhtml:

  1. <div class="header">Top</div>
  2. <div class="wrap">
  3. <div class="left row">left</div>
  4. <div class="right row">
  5. right<br />
  6. right<br />
  7. </div>
  8. <div class="center row">Center<br />
  9. Center<br />
  10. Center<br />
  11. Center<br />
  12. Center0<br />
  13. <span style="float:right; font-size:0; ">&nbsp;</span> <!-- for ie -->
  14. </div>
  15. <div style="clear:both;">&nbsp;</div>
  16. </div>
  17. <div class="footer">bottom</div>

使用float方式的麻烦显而易见，比如会带来很多HACK 补丁，XHTML里面也需要一些无意义标签辅助等。

以下是所谓“圣杯”，基本原理就是：利用外容器设padding，left 和right 设为相对定位，保证中间列自适应。

这里有个例子

  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5.     <title>The Holy Grail of Layouts: Example #3: A List Apart</title>
  6.     <style type="text/css">
  7.  
  8.         /*** The Essential Code ***/
  9.  
  10.         body {
  11.             min-width: 630px;         /* 2 x (LC fullwidth + CC padding) + RC fullwidth */
  12.         }
  13.  
  14.         #container {
  15.             padding-left: 200px;      /* LC fullwidth */
  16.             padding-right: 190px;     /* RC fullwidth + CC padding */
  17.         }
  18.        
  19.         #container .column {
  20.             position: relative;
  21.             float: left;
  22.         }
  23.        
  24.         #center {
  25.             padding: 10px 20px;       /* CC padding */
  26.             width: 100%;
  27.         }
  28.        
  29.         #left {
  30.             width: 180px;             /* LC width */
  31.             padding: 0 10px;          /* LC padding */
  32.             right: 240px;             /* LC fullwidth + CC padding */
  33.             margin-left: -100%;
  34.         }
  35.        
  36.         #right {
  37.             width: 130px;             /* RC width */
  38.             padding: 0 10px;          /* RC padding */
  39.             margin-right: -100%;
  40.         }
  41.        
  42.         #footer {
  43.             clear: both;
  44.         }
  45.        
  46.         /*** IE Fix ***/
  47.         * html #left {
  48.             left: 150px;              /* RC fullwidth */
  49.         }
  50.  
  51.         /*** Equal-height Columns ***/
  52.  
  53.         #container {
  54.             overflow: hidden;
  55.         }
  56.  
  57.         #container .column {
  58.             padding-bottom: 1001em;     /* X + padding-bottom */
  59.             margin-bottom: -1000em;     /* X */
  60.         }
  61.  
  62.         /*** Footer Fix ***/
  63.  
  64.         * html body {
  65.             overflow: hidden;
  66.         }
  67.        
  68.         * html #footer-wrapper {
  69.             float: left;
  70.             position: relative;
  71.             width: 100%;
  72.             padding-bottom: 10010px;
  73.             margin-bottom: -10000px;
  74.             background: #FFF;         /*** Same as body background ***/
  75.         }
  76.  
  77.         /*** Just for Looks ***/
  78.  
  79.         body {
  80.             margin: 0;
  81.             padding: 0;
  82.             background: #FFF;
  83.         }
  84.  
  85.         #header, #footer {
  86.             font-size: large;
  87.             text-align: center;
  88.             padding: 0.3em 0;
  89.             background: #999;
  90.         }
  91.  
  92.         #left {
  93.             background: #66F;
  94.         }
  95.  
  96.         #center {
  97.             background: #DDD;
  98.         }
  99.  
  100.         #right {
  101.             background: #F66;
  102.         }
  103.  
  104.         #container .column {
  105.             padding-top: 1em;
  106.             text-align: justify;
  107.         }
  108.  
  109.     </style>
  110. </head>
  111. <body>
  112.     <div id="header">This is the header.</div>
  113.  
  114.     <div id="container">
  115.  
  116.         <div id="center" class="column">
  117.             <h1>This is the main content.</h1>
  118.         </div>
  119.  
  120.         <div id="left" class="column">
  121.             <h2>This is the left sidebar.</h2>
  122.         </div>
  123.  
  124.         <div id="right" class="column">
  125.             <h2>This is the right sidebar.</h2>
  126.         </div>
  127.     </div>
  128.     <div id="footer-wrapper">
  129.         <div id="footer">This is the footer.</div>
  130.     </div>
  131. </body>
  132.  
  133. </html>

点击查看完整示例：layouttest.html

Tags: 三栏  中间宽度自适应  
发布:karry | 分类:XHTML+CSS | 评论:1 | 引用:0 | 浏览: