DIV+CSS自動適應寬高度

DIV+CSS自適應寬度:

  1. <!DOCTYPE html/> 
  2. <html> 
  3. <head> 
  4. <title>自適應寬度實例--www.ops.cc</title> 
  5. <style type="text/css"> 
  6. /* 自適應寬度 */ 
  7. #left{width:150px;margin-right:-150px;float:left;} 
  8. #center{width:auto;margin:0 0 0 150px;} 
  9. #right{width:140px;margin-left:-140px;float:right;} 
  10.  
  11. /* 自適應高度度 */ 
  12. /* warp 用於隱藏溢出的部分 */ 
  13. #wrap{overflow:hidden;} 
  14. #left,#center,#right{padding-bottom:20000px;margin-bottom:-20000px;} 
  15. </style> 
  16. </head> 
  17. <body> 
  18. <div id="wrap"> 
  19. <div id="left" style="background:#333;height:600px;">左邊欄,固定寬度150px;高度600px</div> 
  20. <div id="right" style="background:#555">右邊欄,固定寬度150px;高度:自適應</div> 
  21. <div id="center" style="background:#888">中間欄,寬度:自適應,高度:自適應</div> 
  22. </div> 
  23. </body> 
  24. </html> 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章