<div> 是 HTML 中的一個(gè)標(biāo)簽，它用于定義文檔中的一個(gè)區(qū)域或部分。在這個(gè)區(qū)域中，我們可以包含其他 HTML 元素，比如文本、圖片、表格等。同時(shí)通過樣式設(shè)置，我們可以將 <div> 元素進(jìn)行定位、布局和裝飾，使頁面達(dá)到更好的可讀性和視覺效果。
<div> 標(biāo)簽有一個(gè)非常有用的屬性，叫做 class。通過給 <div> 元素添加 class 屬性，我們可以為其定義一個(gè)獨(dú)特的樣式。這樣，當(dāng)多個(gè) <div> 標(biāo)簽的 class 值相同時(shí)，我們可以統(tǒng)一對它們應(yīng)用樣式，從而實(shí)現(xiàn)頁面的一致性。一個(gè)常見的應(yīng)用場景是實(shí)現(xiàn)頁面的左右布局。
在頁面的左右布局中，我們通常會(huì)將內(nèi)容分為左側(cè)和右側(cè)兩個(gè)部分。左側(cè)部分可以用來展示導(dǎo)航菜單、目錄或者其他相關(guān)信息，右側(cè)部分則用來展示具體的內(nèi)容、圖片或者表格等。
接下來我們將通過幾個(gè)代碼案例，分別使用純 HTML 和 HTML + CSS 來展示如何實(shí)現(xiàn) "div 左邊右邊" 的布局效果。
代碼案例一（純 HTML）：

<div style="width: 60%; float: left;">
<h2>這是左邊部分的內(nèi)容</h2>
<p>這里可以放置一些文本內(nèi)容，比如導(dǎo)航菜單、目錄等。</p>
</div>
<br>
<div style="width: 40%; float: right;">
<h2>這是右邊部分的內(nèi)容</h2>
<p>這里可以放置一些具體的內(nèi)容，比如圖片、表格等。</p>
</div>

通過設(shè)置左側(cè) <div> 元素的寬度為 60%，右側(cè) <div> 元素的寬度為 40%；使用 float 屬性將它們分別向左和向右浮動(dòng)。這樣，左右兩側(cè)的內(nèi)容就可以自動(dòng)分別占據(jù)頁面寬度的60%和40%，形成左右布局的效果。
代碼案例二（HTML + CSS）：

<style>
.container {
display: flex;
}
.left {
width: 60%;
}
.right {
width: 40%;
}
</style>
<br>
<div class="container">
<div class="left">
<h2>這是左邊部分的內(nèi)容</h2>
<p>這里可以放置一些文本內(nèi)容，比如導(dǎo)航菜單、目錄等。</p>
</div>
<br>
    <div class="right">
<h2>這是右邊部分的內(nèi)容</h2>
<p>這里可以放置一些具體的內(nèi)容，比如圖片、表格等。</p>
</div>
</div>

在這個(gè)案例中，我們添加了一個(gè)名為 "container" 的 <div> 元素，通過設(shè)置它的 display 屬性為 flex，我們可以將內(nèi)部元素自動(dòng)排列成一行。然后，通過設(shè)置左側(cè)和右側(cè) <div> 元素的寬度為60%和40%，分別實(shí)現(xiàn)左右布局的效果。
以上兩個(gè)案例分別展示了純 HTML 和 HTML + CSS 實(shí)現(xiàn) "div 左邊右邊" 的布局方法。在實(shí)際的 Web 開發(fā)中，我們可以根據(jù)項(xiàng)目需求和個(gè)人偏好選擇適合的方法來創(chuàng)建和定制頁面布局。希望這些案例對您有所幫助！