單列變雙列css_CSS常用布局方式-兩列布局、三列布局

CSS基礎

2.幾種布局方式

1)table布局

當年主流的布局方式，第一種是通過table tr td布局

示例：

table{width:800px;height:300px;border-collapse:collapse;

}.left{background-color:red;

}.right{background-color:blue;

}

左

右

頁面效果： 文字自動垂直居中，很友善 同樣可以設定左右的width

第二種是類比表格的table class

示例：

.table{display:table;width:800px;height:300px;

}.tb_row{display:table-row;

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

}.left{background-color:red;

}.right{background-color:blue;

}table

左