css佈局之左側固定右側自適應佈局

技術小胖子發表於2017-11-07
CSS

 1.固定高度



    

  1. <!DOCTYPE HTML> 
    2. 

  2. <html> 
    3. 

  3. <head> 
    4. 

  4. <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”> 
    5. 

  5. <title>左側固定+右側欄自適應寬度</title> 
    6. 

  6. <style type=“text/css”> 
    7. 

  7. * 
    8. 

  8. { 
    9. 

  9.     margin:0; 
    10. 

  10.     padding:0; 
    11. 

  11. } 
    12. 

  12. #mainBody 
    13. 

  13. 
{  

    14. 

  14.     margin:0 auto; 
    15. 

  15.     border:1px solid #ccc; 
    16. 

  16.     padding:5px; 
    17. 

  17. } 
    18. 

  18. #leftCol 
    19. 

  19. { 
    20. 

  20.     width:120px; 
    21. 

  21.     height:400px; 
    22. 

  22.     border:1px solid #ccc; 
    23. 

  23.     background-color:#f0f0f0; 
    24. 

  24.     position:absolute; 
    25. 

  25. } 
    26. 

  26. #rightCol 
    27. 

  27. { 
    28. 

  28.     border:1px solid #ccc; 
    29. 

  29.     background-color:#f0ffff; 
    30. 

  30.     height:400px; 
    31. 

  31.     margin-left:127px; 
    32. 

  32. } 
    33. 

  33. </style> 
    34. 

  34. </head> 
    35. 

  35.  
    36. 

  36. <body> 
    37. 

  37.     <div id=“mainBody”> 
    38. 

  38.         <div id=“leftCol”> 
    39. 

  39.         </div> 
    40. 

  40.         <div id=“rightCol”> 
    41. 

  41.         </div> 
    42. 

  42.     </div> 
    43. 

  43. </body> 
    44. 

  44. </html> 
    45. 



截圖：


 




這裡只截了IE6的。


注：如果佈局元素不是body子級，加個position:relative;即可。


 


除了使用定位以外，用浮動float:left也可以，原理都是脫離文件流，把控制元件留給其他元素。


 


 


但是有個問題， 由於absolute使得外面容器的高度取決於那個自適應的元素，比如我把高度改為300px看一下。


 




2.我們來拿float:left;這個方案討論一下


我們知道對於浮動元素，脫離文件流，父元素捕捉不到其高度height,所以如果float的那個元素比較高，勢必超出容器的邊界。


我們思考，如果富容器也是float，是不是就可以擺脫這種現狀，但是如果無限制的float，勢必需要頂層做個清理。


所以我們採用多套一層float容器的方式實現：


我們上程式碼：


 




    

  1. <!DOCTYPE HTML> 
    2. 

  2. <html> 
    3. 

  3. <head> 
    4. 

  4. <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”> 
    5. 

  5. <title>左側固定+右側欄自適應寬度</title> 
    6. 

  6. <style type=“text/css”> 
    7. 

  7. * 
    8. 

  8. { 
    9. 

  9.     margin:0; 
    10. 

  10.     padding:0; 
    11. 

  11. } 
    12. 

  12. body 
    13. 

  13. { 
    14. 

  14.     padding:10px; 
    15. 

  15. } 
    16. 

  16. #mainBody 
    17. 

  17. { 
    18. 

  18.     width0:950px; 
    19. 

  19.     margin:0 auto; 
    20. 

  20.     border:1px solid #ccc; 
    21. 

  21.     padding:5px; 
    22. 

  22.     position0::relative; 
    23. 

  23.     overflow:hidden; 
    24. 

  24.     height:1%; 
    25. 

  25. } 
    26. 

  26. #layoutContainer 
    27. 

  27. { 
    28. 

  28.     float:left; 
    29. 

  29.     width:100%;  
    30. 

  30. } 
    31. 

  31. #leftCol 
    32. 

  32. { 
    33. 

  33.     width:120px; 
    34. 

  34.     height:200px; 
    35. 

  35.     border:1px solid #ccc; 
    36. 

  36.     background-color:#f0f0f0; 
    37. 

  37.     float:left; 
    38. 

  38. } 
    39. 

  39. #rightCol 
    40. 

  40. { 
    41. 

  41.     border:1px solid #ccc; 
    42. 

  42.     background-color:#f0ffff; 
    43. 

  43.     height:300px; 
    44. 

  44.     margin-left:127px; 
    45. 

  45. } 
    46. 

  46. </style> 
    47. 

  47. </head> 
    48. 

  48.  
    49. 

  49. <body> 
    50. 

  50.     <div id=“mainBody”> 
    51. 

  51.         <div id=“layoutContainer”> 
    52. 

  52.             <div id=“leftCol”> 
    53. 

  53.             </div> 
    54. 

  54.             <div id=“rightCol”> 
    55. 

  55.             </div> 
    56. 

  56.         </div> 
    57. 

  57.     </div> 
    58. 

  58. </body> 
    59. 

  59. </html> 
    60. 



上圖：


 




 


注：解決可能的ie莫名白條問題。


對ie自適應列單獨設定：




*margin-left:5px;/*兩列之間的間距*/ *float:left; 




















 本文轉自 xcf007 51CTO部落格，原文連結：http://blog.51cto.com/xcf007/525082，如需轉載請自行聯絡原作者










相關文章