在網頁設計中，有時候需要將頁面分為兩欄來展示不同的內容。這時候，可以使用CSS來實現。下面介紹兩種方法。 方法一：使用float屬性 在HTML中，我們可以使用兩個div標簽來分別表示兩欄內容。

<div class="left">
<p>這是左欄內容</p>
</div>
<div class="right">
<p>這是右欄內容</p>
</div>

在CSS中，我們為left和right這兩個div設定寬度和浮動方向。

.left {
width: 30%;
float: left;
}
.right {
width: 70%;
float: right;
}

這樣，左邊的div會向左浮動，右邊的div會向右浮動，并且分別占據頁面的30%和70%寬度。兩個div就能夠并排顯示了。 方法二：使用flex布局 在HTML中，我們同樣使用兩個div標簽。

<div class="container">
<div class="left">
<p>這是左欄內容</p>
</div>
<div class="right">
<p>這是右欄內容</p>
</div>
</div>

在CSS中，我們為container設定flex布局，然后為left和right設定寬度。

.container {
display: flex;
}
.left {
width: 30%;
}
.right {
width: 70%;
}

這樣，左邊的div會按照30%的寬度被壓縮，右邊的div會按照70%的寬度被拉伸，從而實現兩欄顯示。 以上兩種方法可以根據具體情況來選擇使用哪種。無論是float布局還是flex布局，都有很好的兼容性，可以適用于各種瀏覽器和設備。