<div>是HTML中的一個常用標簽，用于定義文檔中的一個塊級容器。在Web開發中，經常遇到需要將一個整體內容平分為兩個子部分的情況。這時可以使用<div>標簽結合CSS樣式實現左右平分布局。下面將通過幾個代碼案例詳細解釋說明如何實現<div>左右平分布局。
，我們來看一個基本的示例:

<style>
.container {
display: flex;
}
.left-div, .right-div {
flex: 1;
}
</style>
<div class="container">
<div class="left-div">
這是左側內容
</div>
<div class="right-div">
這是右側內容
</div>
</div>

在上述代碼中，我們定義了一個.container類，設置其display屬性為flex，使其成為一個彈性容器。然后，我們定義了兩個子元素類.left-div和.right-div，并設置其flex屬性為1，這樣左右兩個子元素將會平分.container容器的寬度。這樣，就實現了左右平分布局。
除了使用flex布局之外，我們還可以使用grid布局來實現<div>左右平分布局。下面是一個使用grid布局的示例:

<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
.left-div, .right-div {
background-color: #f2f2f2;
padding: 10px;
}
</style>
<div class="container">
<div class="left-div">
這是左側內容
</div>
<div class="right-div">
這是右側內容
</div>
</div>

在上述代碼中，我們定義了一個.container類，設置其display屬性為grid，即使用grid布局。然后，使用grid-template-columns屬性將容器的寬度分為兩列（1fr 1fr表示兩列平分），從而實現左右平分布局。我們還對左右兩個子元素設置了背景色和內邊距，以便更清楚地看到兩者之間的分隔效果。
除了以上兩種方法，還可以使用float屬性和calc()函數來實現左右平分布局。下面是一個使用float屬性和calc()函數的示例:

<style>
.left-div, .right-div {
float: left;
width: calc(50% - 10px);
background-color: #f2f2f2;
padding: 10px;
}
.clearfix {
clear: both;
}
</style>
<div>
<div class="left-div">
這是左側內容
</div>
<div class="right-div">
這是右側內容
</div>
<div class="clearfix"></div>
</div>

在上述代碼中，我們分別為左右兩個子元素類.left-div和.right-div設置float屬性為left，使其浮動到左側。然后，我們利用calc()函數來設置子元素的寬度，即占父容器寬度的50%減去10px的間距，從而實現左右平分。同時，為了清除浮動帶來的影響，我們添加了一個clearfix類，設置其clear屬性為both，使其在兩個子元素之后換行。
通過以上幾個代碼案例，我們成功實現了<div>左右平分布局。這些布局方法可以根據具體的需求進行選擇和靈活運用。無論是使用flex布局、grid布局還是float屬性和calc()函數，都能夠滿足我們對左右平分布局的需要，并在Web開發中發揮重要作用。
參考文獻： 1. CSS Grid Layout Module. (n.d.). Retrieved from https://www.w3.org/TR/css-grid-1/ 2. CSS Flexible Box Layout Module. (n.d.). Retrieved from https://www.w3.org/TR/css-flexbox-1/