在網(wǎng)頁(yè)設(shè)計(jì)中，左右自適應(yīng)是非常常見的需求。通過(guò)簡(jiǎn)單的 CSS 樣式調(diào)整，我們可以輕松實(shí)現(xiàn)這種布局。在實(shí)現(xiàn)中，我們通常會(huì)采用<div>標(biāo)簽來(lái)進(jìn)行布局，這篇文章將帶您了解如何使用<div>標(biāo)簽實(shí)現(xiàn) CSS 左右自適應(yīng)布局。

首先，我們需要定義兩個(gè)<div>標(biāo)簽并為其指定類名或 ID。其中一個(gè)<div>標(biāo)簽將負(fù)責(zé)左邊的內(nèi)容區(qū)域，另一個(gè)則負(fù)責(zé)右邊的內(nèi)容區(qū)域。樣式代碼如下：

<style>
.left {
float: left; /* 左側(cè)浮動(dòng) */
width: 70%; /* 左側(cè)寬度 */
}
.right {
float: right; /* 右側(cè)浮動(dòng) */
width: 30%; /* 右側(cè)寬度 */
}
</style>

在上述代碼中，我們將左側(cè)內(nèi)容區(qū)域的寬度設(shè)置為 70%，右側(cè)內(nèi)容區(qū)域的寬度設(shè)置為 30%。這兩個(gè)<div>標(biāo)簽都采用了浮動(dòng)布局，以便它們能夠并排顯示。接下來(lái)我們可以在 HTML 中添加內(nèi)容：

<div class="left">
<h1>左側(cè)標(biāo)題</h1>
<p>左側(cè)內(nèi)容區(qū)域</p>
</div>
<div class="right">
<h1>右側(cè)標(biāo)題</h1>
<p>右側(cè)內(nèi)容區(qū)域</p>
</div>

如上所述，我們的網(wǎng)頁(yè)現(xiàn)在有了兩個(gè)并排顯示的<div>標(biāo)簽。左側(cè)<div>標(biāo)簽包含一個(gè)標(biāo)題和內(nèi)容區(qū)域，右側(cè)標(biāo)簽也包含標(biāo)題和內(nèi)容區(qū)域。

當(dāng)你在瀏覽器中預(yù)覽網(wǎng)頁(yè)時(shí)，你將看到左側(cè)內(nèi)容區(qū)域和右側(cè)內(nèi)容區(qū)域都完美地適應(yīng)了網(wǎng)頁(yè)大小。當(dāng)你調(diào)整窗口大小時(shí)，兩個(gè)區(qū)域的大小也將跟著發(fā)生改變。這就是使用<div>標(biāo)簽實(shí)現(xiàn) CSS 左右自適應(yīng)布局的基本方法。