如何 - 兩列布局
瞭解如何使用 CSS 建立 2 列布局網格。
列 1
一些文字..
列 2
一些文字..
如何建立兩列布局
步驟 1) 新增 HTML
示例
<div class="row">
<div class="column"></div>
<div class="column"></div>
</div>
步驟 2) 新增 CSS
在此示例中，我們將建立兩個等寬的列。
Float 示例
.column {
float: left;
width: 50%;
}
/* 清除列後的浮動 */
.row:after {
content: "";
display: table;
clear: both;
}
自己動手試一試 »
建立兩列布局的一種現代方式是使用 CSS Flexbox。然而，Internet Explorer 10 及更早版本不支援它。
您可以選擇使用浮動或 Flex 來建立兩列布局。但是，如果您需要支援 IE10 及更低版本，則應使用浮動。
提示: 要了解更多關於Flexbox佈局模組的資訊，閱讀我們的CSS Flexbox章節。
在此示例中，我們將建立兩個不等寬的列。
在此示例中，我們將建立一個響應式兩列布局。
示例
/* 響應式佈局 - 當螢幕寬度小於 600px 時，使兩個列堆疊在一起，而不是並排顯示 */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
自己動手試一試 »
提示：前往我們的 CSS 網站佈局 教程瞭解更多關於網站佈局的資訊。
提示：前往我們的 CSS 響應式 Web 設計 教程瞭解更多關於響應式 Web 設計和網格的資訊。
