在網頁設計中，左右自適應是非常常見的需求。通過簡單的 CSS 樣式調整，我們可以輕松實現這種布局。在實現中，我們通常會采用<div>標簽來進行布局，這篇文章將帶您了解如何使用<div>標簽實現 CSS 左右自適應布局。

首先，我們需要定義兩個<div>標簽并為其指定類名或 ID。其中一個<div>標簽將負責左邊的內容區域，另一個則負責右邊的內容區域。樣式代碼如下：

<style>
.left {
float: left; /* 左側浮動 */
width: 70%; /* 左側寬度 */
}
.right {
float: right; /* 右側浮動 */
width: 30%; /* 右側寬度 */
}
</style>

在上述代碼中，我們將左側內容區域的寬度設置為 70%，右側內容區域的寬度設置為 30%。這兩個<div>標簽都采用了浮動布局，以便它們能夠并排顯示。接下來我們可以在 HTML 中添加內容：

<div class="left">
<h1>左側標題</h1>
<p>左側內容區域</p>
</div>
<div class="right">
<h1>右側標題</h1>
<p>右側內容區域</p>
</div>

如上所述，我們的網頁現在有了兩個并排顯示的<div>標簽。左側<div>標簽包含一個標題和內容區域，右側標簽也包含標題和內容區域。

當你在瀏覽器中預覽網頁時，你將看到左側內容區域和右側內容區域都完美地適應了網頁大小。當你調整窗口大小時，兩個區域的大小也將跟著發生改變。這就是使用<div>標簽實現 CSS 左右自適應布局的基本方法。