非著名的得瑟演员赵鹏的博客,记录赵鹏的一点或者得瑟或者低调或者高兴或者闷骚的心情
有一份祝福,记在心里,默默滴保佑着...加油! :)

自适应高度和宽度的三列CSS布局,玛丽的邻居IE6

At 2009-01-09 02:44

昨天要写一个自适应高度和宽度的三列页面,布局是

 

XML/HTML代码
  1. <div id="a">  
  2.     A  
  3. </div>  
  4. <div id="b">  
  5.     基础服务项目 个性化的网络商铺，支持自选风格，全面展示产品、新闻、供求、企业简介、、在线留言、联系方式等信息。既是一个网上商城，又是一个企业网站！ 功能强大的管理中心，拥有对产品管理、新闻管理、供求管理、企业信息管理、留言管理等功能。在强大功能的基础上保持充分的灵活性，允许您自由编辑网站内容。 10M的产品存储空间，不限数据库容量。   
  6. </div>  
  7. <div id="c">  
  8.     C  
  9. </div>

在不改变HTML的基础上只改CSS,改了半天也不行,FireFox下没问题了,总在IE6下卡壳,可是烦死寡人了,最后没办法了,只好稍微改动了一下HTML,完成,记录一下,顺便B4一下IE6~最终代码如下

 

 

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>3列布局</title>  
  6. <style type="text/css">  
  7. <!--  
  8. * {  
  9.     margin: 0;   
  10.     padding: 0;  
  11. }   
  12. body {  
  13.     font-size:14px;  
  14. }   
  15. #wrapper {  
  16.     overflow:hidden;  
  17.     padding:0 10px;  
  18. }   
  19. #a {  
  20.     width:250px;  
  21.     float:left;  
  22.     background:#69C;  
  23. }   
  24. #c {  
  25.     background:#FC0;   
  26.     _float:left;  
  27.     overflow:hidden;  
  28. }   
  29. #b {      
  30.     width:350px;  
  31.     float:right;  
  32.     background:#F90;  
  33.       
  34. }  
  35. .box{  
  36.     margin-bottom:-10000px;  
  37.     padding-bottom:10000px;  
  38. }  
  39. -->  
  40. </style>  
  41. </head>  
  42.   
  43. <body>  
  44. <div id="wrapper">  
  45.     <div id="a" class="box">  
  46.         A  
  47.     </div>  
  48.     <div id="b" class="box">  
  49.         基础服务项目 个性化的网络商铺，支持自选风格，全面展示产品、新闻、供求、企业简介、、在线留言、联系方式等信息。既是一个网上商城，又是一个企业网站！ 功能强大的管理中心，拥有对产品管理、新闻管理、供求管理、企业信息管理、留言管理等功能。在强大功能的基础上保持充分的灵活性，允许您自由编辑网站内容。 10M的产品存储空间，不限数据库容量。  
  50.       
  51.     </div>  
  52.     <div id="c" class="box">  
  53.         C  
  54.     <span style="float:right; font-size:0; position:relative; "> </span>   
  55.     </div>  
  56. </div>  
  57. </body>  
  58. </html>  

 

Tags: css, 三列, 自适应, 高度, 宽度

笔记 | 评论:0 | Trackbacks:0 | 阅读:2139