三欄頁面佈局方式
阿新 • • 發佈：2018-12-15
假設高度已知，請寫出三欄佈局，其中左蘭、右欄寬度各為300px，中間自適應。
1、浮動
2、絕對定位
3、flexbox
4、表格佈局
5、網格佈局 grid
<!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>layout</title> <style media="screen"> html *{ padding: 0; margin: 0; } .layout article div{ min-height: 100px; } </style> </head> <body> <section class="layout float"> <style media="screen"> .layout.float .left{ float: left; width: 300px; background: red; } .layout.float .right{ float: right; width: 300px; background: blue; } .layout.float .center{ background: yellow; } </style><article class="left-right-center"> <div class="left"></div> <div class="right"></div> <div class="center"> <h1>浮動解決方案</h1> </div> </article> </section> </body> </html>
2、絕對定位
<!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>layout</title> <style media="screen"> html *{ padding: 0; margin: 0; } .layout article div{ min-height: 100px; } </style> </head> <body> <section class="layout absolute"> <style> .layout.absolute .left-center-right>div{ position: absolute; } .layout.absolute .left{ width: 300px; left:0; background: red } .layout.absolute .center{ left: 300px; right: 300px; background: yellow; } .layout.absolute .right{ width: 300px; right: 0; background: blue; } </style> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h2>絕對定位</h2> </div> <div class="right"></div> </article> </section> </body> </html>
3、flexbox
<!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>layout</title> <style media="screen"> html *{ padding: 0; margin: 0; } .layout article div{ min-height: 100px; } </style> </head> <body> <section class="layout flexbox"> <style> .layout.flexbox .left-center-right{ display: flex; } .layout.flexbox .left{ width: 300px; background: red; } .layout.flexbox .center{ flex: 1; background: yellow; } .layout.flexbox .right{ width: 300px; background: blue; } </style> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h2>flexbox</h2> </div> <div class="right"></div> </article> </section> </body> </html>
4、表格佈局
<!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>layout</title> <style media="screen"> html *{ padding: 0; margin: 0; } .layout article div{ min-height: 100px; } </style> </head> <body> <section class="layout table"> <style> .layout.table .left-center-right { width: 100%; display: table; height: 100px; } .layout.table .left-center-right>div { display: table-cell; } .layout.table .left { width: 300px; background: red; } .layout.table .center { background: yellow; } .layout.table .right { width: 300px; background: blue; } </style> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h2>表格佈局</h2> </div> <div class="right"></div> </article> </section> </body> </html>
5、網格佈局 grid
<!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>layout</title> <style media="screen"> html *{ padding: 0; margin: 0; } .layout article div{ min-height: 100px; } </style> </head> <body> <section class="layout grid"> <style> .layout.grid .left-center-right{ display: grid; width: 100%; grid-template-rows: 100px; grid-template-columns: 300px auto 300px } .layout.grid .left{ background: red; } .layout.grid .center{ background: yellow; } .layout.grid .right{ background: blue; } </style> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h2>網格佈局</h2> </div> <div class="right"></div> </article> </section> </body> </html>