首页 » WEB开发 » 正文

(原创)分两栏,左右栏个自适应相邻的高度(兼容各浏览器)

(原创)分两栏,左右栏个自适应相邻的高度(兼容各浏览器)
分两栏,左右栏个自适应相邻的高度(兼容IE6.7.8.火狐)。(左栏的高度增加,右栏自动增加高度。右栏高度增加,左栏自动增加高度)

直接看代码:

  1. <!DOCTYPE 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>高度自适应</title>
  6. <style type=”text/css”>
  7. <!–
  8. body { text-align: center; }
  9. .clr{clear:both;width:0px;height:0px;overflow:hidden;}
  10. .w{ width:960px; margin:0px auto; background-color:#0F91CF; position:relative; overflow: hidden; }
  11. .w .l-r{ width:960px; background-color:#F00; position:relative; right:300px; }
  12. .w .l-r .l{width:650px;padding-right:10px;float:left;position:relative;left:300px;}
  13. .w .l-r .r{width:300px;float:left;position:relative;left:300px;}
  14. –>
  15. </style>
  16. </head>
  17. <body>
  18. <div class=”w”>
  19. <div class=”l-r”>
  20. <div class=”l”>
  21. 1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
  22. </div>
  23. <div class=”r”>
  24. 2<br />2<br />2<br />2<br />2<br />2<br />2<br />2<br />2<br />2<br />2<br />2<br />2<br />2<br />2<br />2<br />2<br />2<br />2<br />
  25. </div>
  26. <div class=”clr”></div>
  27. </div>
  28. </div>
  29. </body>
  30. </html>

点击查看大图

本文共 1 个回复

发表评论