內容區域

　　

　　內容區域一般有三種形式:

　　

　　1 列：一般用于移動端

　　

　　2 列：一般用于平板設備

　　

　　3 列：一般用于 PC 桌面設備

　　

　　我們將創建一個 3 列布局，在小的屏幕上將會變成 1 列布局（響應式）：

　　

　　CSS3 實例

　　

　　/* 創建三個相等的列 */

　　

　　.column {

　　

　　float: left;

　　

　　width: 33.33%;

　　

　　}

　　

　　/* 列后清除浮動 */

　　

　　.row:after {

　　

　　content: "";

　　

　　display: table;

　　

　　clear: both;

　　

　　}

　　

　　/* 響應式布局 - 小于 600 px 時改為上下布局 */

　　

　　@media screen and (max-width: 600px) {

　　

　　.column {

　　

　　width: 100%;

　　

　　}

　　

　　}