CSS一行两列左右背景高度自适应

博客开通一个多星期了一直写的都是一些杂七杂八的评论，一直没有写程序开发方面的内容。主要一个原因是后台文本编辑器一直没有弄好，帖代友太麻烦。目前已经Ok了，以后的日子里我也会多写一些技术类文章。一般都是我工作中实际碰到的情况，贴出来一是便于以后自己查阅，二个也可以和大家交流，共同学习


一行两列左右背景高度自适应一直是css布局中的难点，虽然这在表格中很好实现，或者用JS+div也能实现。下面我的写法是纯css写的，在目前所有已知浏览器下测试通过。废话不多说，代码贴出来



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>haozi一行两列背景高度自适应</title>  

  6. <style>  

  7. *{margin:0; padding:0}   

  8. .wrapper{width:600px;/*总宽度为900，这里只能写600，因为padding-left有300像素*/ padding-left:300px; background:#F00; float:left; display:inline}   

  9. .content{float:left; display:inline; background:#00F}   

  10. .left{float:left;display:inline; margin-left:-300px; position:static; _position:fixed;/*ie6和以下版本要用fixed*/ width:300px}   

  11. .right{float:right; width:600px}   

  12. .clear{clear:both}   

  13. </style>  

  14. </head>  

  15.   

  16. <body>  

  17. <div class="wrapper">  

  18.     <div class="content">  

  19.         <div class="left">left<p>left</div>  

  20.         <div class="right">right<p>right<p>right<p>right<p>right<p>right<p></div>  

  21.             <div class="clear"></div><!--任何时候浮动后都应立即清浮动，养成好习惯-->  

  22.     </div>  

  23. </div>  

  24. </body>  

  25. </html>  











 提示：您可以先修改部分代码再运行

 


 

 posted on 2010-01-16 07:02  耗子么  阅读(219)  评论(0)  编辑  收藏  举报