如何做 - 三列布局
瞭解如何使用 CSS 建立一個三列布局網格。
如何建立三列布局
步驟 1) 新增 HTML
示例
<div class="row">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
步驟 2) 新增 CSS
在此示例中，我們將建立三個等寬列
示例
.column {
float: left;
width: 33.33%;
}
/* 清除列後的浮動 */
.row:after {
content: "";
display: table;
clear: both;
}
自己動手試一試 »
在此示例中，我們將建立三個不等寬列
在此示例中，我們將建立一個響應式三列布局
示例
/* 響應式佈局 - 當螢幕寬度小於600px時，讓三列堆疊而不是並排顯示 */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
自己動手試一試 »
提示：前往我們的 CSS 網站佈局 教程瞭解更多關於網站佈局的資訊。
提示：前往我們的 CSS 響應式 Web 設計 教程瞭解更多關於響應式 Web 設計和網格的資訊。
