CSS兩欄佈局，左邊定寬，右邊自適應怎麼實現？
阿新 • • 發佈：2019-02-13
這是頁面佈局的一個經典問題，總結下幾種可行性的方法。
左邊佈局定好寬度，右邊佈局實現自適應。
方法一：可以用用flex佈局，給父容器設定 display：flex；Right部分設定 flex：1 ；left只是之前定好的寬度；
<!DOCTYPE html> <html> <head> <title>佈局</title> <meta charset="utf-8"> <style type="text/css"> .left{ width: 300px; height: 200px; background-color: blue; } .box{ display: flex; } .right{ flex: 1; height: 200px; background-color: red; } </style> </head> <body> <div class="box"> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>
方法二：左邊設定左浮動，右邊寬度設定100%；
<!DOCTYPE html> <html> <head> <title>佈局</title> <meta charset="utf-8"> <style type="text/css"> .left{ width: 300px; height: 200px; background-color: blue; } .box{ display: flex; } .right{ flex: 1; height: 200px; background-color: red; } </style> </head> <body> <div class="box"> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>
方法三：使用負margin，為自適應部分新增容器 .container, 同時改變左右部分的位置，如下：
<!DOCTYPE html> <html> <head> <title>佈局</title> <meta charset="utf-8"> <style type="text/css"> .container{ float: left; width: 100%; } .right{ margin-left: 300px; height: 200px; background-color: red; } .left{ float:left; margin-left: -100%; width: 300px; height: 200px; background-color: blue; } </style> </head> <body> <div class="container"> <div class="right">right</div> </div> <div class="left">left</div> </body> </html>
方法四：設定浮動 + 在 css 中使用 calc(四則運算)函式
【分析】 1. 浮動。（注意：為了不影響其他元素，別忘了在父級上清除浮動） 2. calc() = calc(四則運算) 用於在 css 中動態計算長度值，需要注意的是，運算子前後都需要保留一個空格，例如：width: calc(100% - 10px)； 3. 原理是利用vw：viewport width。1vw = viewport 寬度的 1%, 100vw = viewport width, 同樣的還有 vh： viewport height。1vw = viewport 高度的 1%， 100vh = viewport height。 瀏覽器支援情況： 主流瀏覽器、IE10+ vw 和 vh 會隨著viewport 的變化而變化，因此十分適合於自適應場景來使用。
。。。