1.利用浮動解決三欄佈局問題

<style lang=""> html *{ padding: 0; margin:0; } .layout .left-center-right>div { height: 100px; } section.layout { margin-top: 20px; } <section class="layout float"> <style lang=""> .layout.float .left-center-right { position: relative; } .layout.float .left { width: 300px; float: left; background-color: red; } .layout.float .center { background-color: yellow; } .layout.float .right { width: 300px; float: right; background-color: blue; } </style> <article class="left-center-right"> <div class="left"></div> <div class="right"></div> <div class="center"> <h1>浮動解決</h1> 1.左右三欄佈局，浮動解決方法 2.左右三欄佈局，浮動解決方法 </div> </article> </section> 2.利用絕對定位解決 <style lang=""> html *{ padding: 0; margin:0; } .layout .left-center-right>div { height: 100px; } section.layout { margin-top: 20px; } <section class="layout absolute"> <style lang=""> .layout.absolute .left-center-right { position: relative; } .layout.absolute .left-center-right>div { position: absolute; } .layout.absolute .left { width: 300px; left:0; background-color: red; } .layout.absolute .right { width: 300px; right:0; background-color: blue; } .layout.absolute .center { left:300px; right:300px; background-color:yellow; } </style> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h1>定位解決</h1> 1.左右三欄佈局，定位解決方法 2.左右三欄佈局，定位解決方法 </div> <div class="right"></div> </article> </section> 3.利用flexbox解決 <style lang=""> html *{ padding: 0; margin:0; } .layout .left-center-right>div { height: 100px; } section.layout { margin-top: 20px; } </style> <section class="layout flexbox"> <style lang=""> .layout.flexbox { margin-top: 140px; } .layout.flexbox .left-center-right { display: flex; } .layout.flexbox .left { width: 300px; background-color: red; } .layout.flexbox .center { flex: 1; background-color: yellow; } .layout.flexbox .right{ width: 300px; background-color: blue; } </style> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h1>flexbox解決</h1> 1.左右三欄佈局，flexbox解決方法 2.左右三欄佈局，flexbox解決方法 </div> <div class="right"></div> </article> </section> 4.利用table表格佈局 <style lang=""> html *{ padding: 0; margin:0; } .layout .left-center-right>div { height: 100px; } section.layout { margin-top: 20px; } </style> <section class="layout table"> <style lang=""> .layout.table .left-center-right { display: table; width: 100%; /* height: 100px; */ } .layout.table .left-center-right>div { display: table-cell } .layout.table .left { width: 300px; background-color: red; } .layout.table .center { background-color: yellow; } .layout.table .right { width: 300px; background-color: blue; } </style> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h1>table解決</h1> 1.左右三欄佈局，table解決方法 2.左右三欄佈局，table解決方法 </div> <div class="right"></div> </article> </section>  5.利用grid網格佈局 <style lang=""> html *{ padding: 0; margin:0; } .layout .left-center-right>div { height: 100px; } section.layout { margin-top: 20px; } </style> <section class="layout grid"> <style lang=""> .layout.grid .left-center-right { display: grid; grid-template-rows: 100px; grid-template-columns: 300px auto 300px; } .layout.grid .left { background-color: red; } .layout.grid .center { background-color: yellow; } .layout.grid .right { background-color: blue; } </style> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h1>網格（grid）解決</h1> 1.左右三欄佈局，網格（grid）解決方法 2.左右三欄佈局，網格（grid）解決方法 </div> <div class="right"></div> </article> </section>