布局方式－表格布局

普通的表格布局

<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>

布局方式－表格布局

猜你喜欢