CSS3 calc函式+position+float實現左右兩欄固定，中間欄自適應佈局且中間欄優先載入
阿新 • • 發佈：2018-12-16
先上結果圖
頁面縮小時
程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .main{ width: 100%; background: red; overflow: hidden; position: relative; } .left{ width: 200px; height: 500px; background: yellow; float: left; } .right{ width: 200px; height: 500px; background: green; float: right; } .middle{ background: rosybrown; position: absolute; top: 0; left: 210px; height: 500px; width: calc(100% - 420px); } </style> </head> <body> <div class="main"> <div class="middle">middle</div> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>