Css之雙列自適應佈局
阿新 • • 發佈：2019-02-03
不論怎麼拖動瀏覽器， 左側始終固定寬度
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .page{ width: 100%; background: #000; position: relative; padding-left: 333px; box-sizing: border-box; } .side{ width: 333px; height: 550px; background: #f88; position: absolute; left: 0; } .main{ width: 100%; height: 550px; background: #ff88c2; } </style> </head> <body> <div class="page"> <div class="side"> <img src="img/test.jpg"width="100px" alt="as"> <h2>Whenyou are old Side</h2> <p>When you are old and gray and full of sleep,</p> </div> <div class="main"> <img src="img/test.jpg"width="100px" alt="aa"> <h1>愛情Main</h1> <p>愛情就美在風險和運氣,我們將自身轉向了未知、神祕。</p> </div> </div> </body> </html>