操作指南 - 混合列布局
學習如何使用 CSS 建立混合列布局網格。
學習如何建立響應式列布局，使其根據螢幕寬度在 4 列、2 列和全寬列之間變化。
調整瀏覽器視窗大小以檢視響應效果
如何建立混合列布局
步驟 1) 新增 HTML
示例
<div class="row">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
步驟 2) 新增 CSS
在此示例中，我們將建立一個四列布局，該佈局在螢幕寬度小於 900 畫素時會轉換為兩列。但是，在螢幕寬度小於 600 畫素時，這些列將堆疊在一起，而不是並排浮動。
示例
/* 建立四等分浮動列 */
.column {
float: left;
width: 25%;
}
/* 清除浮動 */
.row:after {
content: "";
display: table;
clear: both;
}
/* 響應式佈局 - 建立一個兩列布局而不是四列 */
@media screen and (max-width: 900px) {
.column {
width: 50%;
}
}
/* 響應式佈局 - 使兩列堆疊而不是並排 */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
自己動手試一試 »
提示：前往我們的 CSS 網站佈局 教程瞭解更多關於網站佈局的資訊。
提示：前往我們的 CSS 響應式 Web 設計 教程瞭解更多關於響應式 Web 設計和網格的資訊。
