普通的表格布局
<style> .table { display: table; width: 800px; height: 200px; } .table-row { display: table-row; } .table-cell { vertical-align: middle; display: table-cell; } .left { background: red; } .right { background: blue; } </style> <body> <div class="table"> <div class="table-row"> <div class="left table-cell">左</div> <div class="right table-cell">右</div> </div> </div> </body>
三栏布局－表格布局
<style media="screen"> html *{ padding: 0; margin: 0; } .layout article div{ min-height: 100px; } </style> <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>