這可能是史上最全的CSS自適應佈局總結教程
阿新 • • 發佈：2019-02-13
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>寬度自適應佈局</title> <style> .wrap { background-color: #FBD570; font-size: 0; letter-spacing: -4px; /*用於相容safari，根據不同字型字號或許需要做一定的調整*/ margin-right: 150px; } .wrap * { font-size: 1rem; letter-spacing: normal; } .left { display: inline-block; vertical-align: top; width: 100px; background: #00f; height: 180px; margin-left: -100%; } .right { display: inline-block; vertical-align: top; width: 150px; background: #0f0; height: 200px; margin-right: -150px; } .center { display: inline-block; vertical-align: top; background: #B373DA; height: 150px; min-width: 150px; width: 100%; box-sizing: border-box; padding-left: 100px; background-origin: content-box; background-clip: content-box; } </style> </head> <body> <div class="wrap"> <div class="center"> center，可以自適應瀏覽器寬度，高度固定。 </div> <div class="right">right，寬度高度固定</div> <div class="left">left，寬度高度固定</div> </div> </body> </html>