[TOC] # 三欄布局 左、右側高度固定，中間自適應 <br> <br> ## 解決方案 ### 浮動 ~~~ <section class="layout float"> <h1>三欄布局</h1> <article class="left-right-center"> <div class="left"></div> <div class="right"></div> <div class="center"> <h2>浮動解決方案</h2> 1.這是三欄布局的浮動解決方案； 2.這是三欄布局的浮動解決方案； 3.這是三欄布局的浮動解決方案； 4.這是三欄布局的浮動解決方案； 5.這是三欄布局的浮動解決方案； 6.這是三欄布局的浮動解決方案； </div> </article> </section> <style media="screen"> .layout.float .left{ float:left; width:300px; background: red; } .layout.float .center{ background: yellow; } .layout.float .right{ float:right; width:300px; background: blue; } </style> ~~~ 優點 * 兼容性好 缺點 * 需要處理浮動問題 <br> ### 絕對定位 ~~~ <section class="layout absolute"> <h1>三欄布局</h1> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h2>絕對定位解決方案</h2> 1.這是三欄布局的浮動解決方案； 2.這是三欄布局的浮動解決方案； 3.這是三欄布局的浮動解決方案； 4.這是三欄布局的浮動解決方案； 5.這是三欄布局的浮動解決方案； 6.這是三欄布局的浮動解決方案； </div> <div class="right"></div> </article> </section> <style> .layout.absolute .left-center-right>div{ position: absolute; } .layout.absolute .left{ left:0; width: 300px; background: red; } .layout.absolute .center{ left: 300px; right: 300px; background: yellow; } .layout.absolute .right{ right:0; width: 300px; background: blue; } </style> ~~~ 優點 * 兼容性好 缺點 * 脫離文檔流 <br> ### flex ~~~ <section class="layout flexbox"> <h1>三欄布局</h1> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h2>flexbox解決方案</h2> 1.這是三欄布局的浮動解決方案； 2.這是三欄布局的浮動解決方案； 3.這是三欄布局的浮動解決方案； 4.這是三欄布局的浮動解決方案； 5.這是三欄布局的浮動解決方案； 6.這是三欄布局的浮動解決方案； </div> <div class="right"></div> </article> </section> <style> .layout.flexbox{ margin-top: 110px; } .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> ~~~ 優點 * 能簡便、完整、響應式地實現各種頁面布局 缺點 * PC端兼容性較差 <br> ### table ~~~ <section class="layout table"> <h1>三欄布局</h1> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h2>表格布局解決方案</h2> 1.這是三欄布局的浮動解決方案； 2.這是三欄布局的浮動解決方案； 3.這是三欄布局的浮動解決方案； 4.這是三欄布局的浮動解決方案； 5.這是三欄布局的浮動解決方案； 6.這是三欄布局的浮動解決方案； </div> <div class="right"></div> </article> </section> <style> .layout.table .left-center-right{ width:100%; height: 100px; display: table; } .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> ~~~ 優點 * 處理特定問題比較方便 缺點 <br> ### grid ~~~ <section class="layout grid"> <h1>三欄布局</h1> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h2>網格布局解決方案</h2> 1.這是三欄布局的浮動解決方案； 2.這是三欄布局的浮動解決方案； 3.這是三欄布局的浮動解決方案； 4.這是三欄布局的浮動解決方案； 5.這是三欄布局的浮動解決方案； 6.這是三欄布局的浮動解決方案； </div> <div class="right"></div> </article> </section> <style> .layout.grid .left-center-right{ width:100%; display: grid; grid-template-rows: 100px; grid-template-columns: 300px auto 300px; } .layout.grid .left-center-right>div{ } .layout.grid .left{ width: 300px; background: red; } .layout.grid .center{ background: yellow; } .layout.grid .right{ background: blue; } </style> ~~~ 優點 * 能簡便、完整、響應式地實現各種頁面布局 缺點 * 兼容性較差 ## 高度不固定時哪些布局能繼續使用 * flex布局 * table布局