假設高度已知，請寫出三欄佈局，其中左欄、右欄寬度各為300px，中間自適應
阿新 • • 發佈：2018-12-10
解決方案：
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>test1</title> <style media="screen"> .left { width: 300px; background-color: blue; height: 200px; text-align: center; } .center { background-color: #ccc; height: 200px; text-align: center; } .right { text-align: center; width: 300px; background-color: red; height: 200px; } </style> </head> <body> <!-- 浮動 --> <section class="sec1"> <style media="screen"> .sec1 .left { float: left; } .sec1 .right { float: right; } </style> <div class="left">left</div> <div class="right">right</div> <div class="center">浮動 ： center--center--center--</div> </section> <!-- 絕對定位 --> <section class="sec2"> <style media="screen"> .sec2 { margin-top: 20px; position: relative; } .sec2 > div { position: absolute; } .sec2 .left { left: 0; } .sec2 .right { right: 0; } .sec2 .center { left: 300px; right: 300px; } </style> <div class="left">left</div> <div class="center">絕對定位 ： center--center--center--</div> <div class="right">right</div> </section> <!-- flex佈局 --> <section class="sec3"> <style media="screen"> .sec3 { margin-top: 240px; display: flex; } .sec3 .center { flex: 1; } </style> <div class="left">left</div> <div class="center">flex : center--center--center--</div> <div class="right">right</div> </section> <!-- 表格佈局 --> <section class="sec4"> <style media="screen"> .sec4 { margin-top: 20px; display: table; width: 100% } .sec4 > div { display: table-cell; } </style> <div class="left">left</div> <div class="center">表格佈局 : center--center--center--</div> <div class="right">right</div> </section> <!-- 網格佈局 --> <section class="sec5"> <style media="screen"> .sec5 { margin-top: 20px; display: grid; width: 100%; /* grid-template-rows: 100px; */ grid-template-columns: 300px auto 300px; } </style> <div class="left">left</div> <div class="center">網格佈局 : center--center--center--</div> <div class="right">right</div> </section> </body> </html> <!-- 1、以上各種佈局的優缺點，以及比較推薦哪一種方案 (1)浮動 : - 缺點 :浮動是脫離文件流的，有些時候需要清除浮動，需要很好的處理浮動周邊元素的關係 - 優點 :相容性比較好 (2)絕對定位 : - 缺點 :該佈局脫離文件流，所以子元素也必須脫離文件流，因此可使用性比較差 - 優點 :快捷，比較不容易出問題 (3)flex : - 缺點 :相容性比較差(css3的屬性)，不相容IE8及以下 - 優點 :非常有效的解決了浮動和絕對定位的問題 (4)表格佈局 : - 缺點 :操作繁瑣，當三欄中其中某一欄高度超出時，其他兩欄的高度也會自動跟著調整(不符合某些場景) - 優點 :相容性非常好，補缺了flex佈局相容的問題 (5)網格佈局 : - 新技術 2、如果去掉"高度已知"， 以上哪種方案同樣適用？ 只有 flex佈局 和 表格佈局 同樣適用 -->