如何使用 CSS 分成兩列？ 在許多網頁設計中，要把頁面的內容分成兩列是非常普遍的，而 CSS 提供了一種簡單且有效的方法來做到這一點。下面我們來看看如何使用 CSS 把網頁內容分成兩列。 首先，我們需要使用 HTML 創建一個包含所有內容的容器。為了方便起見，我們可以使用一個 div 標簽，它允許我們創建一個塊級元素，可以包含其他 HTML 標簽。我們可以給這個容器一個類名，便于在 CSS 中引用。 如下所示：

<div class="column-container">
<p>這是第一欄內容</p>
<p>這是第二欄內容</p>
</div>

接下來，我們將使用 CSS 把容器分成兩列。在 CSS 中，我們可以使用 float 屬性來把元素從正常排布的位置移動到另一個位置。我們可以將第一列浮動到左邊，第二列浮動到右邊。如下所示：

.column-container {
width: 100%;
}
.column-container p {
padding: 10px;
margin: 0;
}
.column-container .left-column {
float: left;
width: 50%;
}
.column-container .right-column {
float: right;
width: 50%;
}

以上 CSS 代碼中，我們使用了 width 屬性來指定每列的寬度。由于分成兩列，所以每列的寬度是容器的一半。接著，我們使用 float 屬性把左列浮動到左邊，把右列浮動到右邊。兩個列現在被“拆分”成兩個不同的塊，這就是兩列布局的開始。 接下來，我們可以對容器和列添加樣式，以更改背景顏色，字體樣式和邊框等等。由于我們已經在 HTML 中使用了類名，所以可以輕松地在 CSS 中引用它們。 做到這一步后，兩列網頁布局就已經完成了。如果我們想升級到三欄式布局，只需在容器內添加另一個 div，設置相應的樣式即可。 總結 使用 CSS 分成兩列非常簡單，只需創建一個包含所有內容的容器，然后使用 float 屬性將它們“拆分”成不同的塊。之后，我們可以輕松地為它們添加樣式。 希望以上簡單的示例為你帶來了一些啟示。現在你已經掌握了如何使用 CSS 分成兩列，您可以試試為您的網頁創建創新性的布局。