css-常用布局方法02-table布局

一、css-常用布局方法

1. table表格布局

// 使用表格标签进行布局
<table>
  <tr>
    <td class="left">左</td>
    <td class="right">右</td>
  </tr>
</table>

.left {
  background: blue;
}
.right {
  background: red;
}
table {
  width: 800px;
  height: 200px;
  border-collapse: collapse;
}

// 不使用表格布局
<div class="table">
  <div class="table-row">
    <div class="left table-cell">左</div>
    <div class="right table-cell">右</div>
  </div>
</div>

.table {
  width: 800px;
  height: 200px;
  display: table;
}

.table-row {
  display: table-row;
}

.table-cell {
  vertical-align: middle;
  display: table-cell;
  text-align: center;
}

效果：