<div>是HTML中的一個元素，用于創建一個容器，可以用來組織和布局頁面上的內容。在某些情況下，我們可能希望將<div>元素水平分為兩個部分，以便在一個容器中顯示兩個不同的內容。這可以通過使用CSS樣式來實現。
下面是幾個示例，展示了如何將<div>元素分為兩個部分。
第一個示例是將<div>元素垂直分為兩個部分。我們可以使用CSS的display屬性來控制<div>元素的布局方式。將<div>元素的display屬性設置為"flex"可以將其內容水平布局。通過設置<div>元素的flex-direction屬性為"row"，我們可以讓其內部的元素水平排列。接下來，我們將其中一個<div>元素設置為50%寬度，另一個設置為另外50%寬度，從而使它們平分容器的寬度。以下是示例代碼：

<pre>
<style>
.container {
display: flex;
flex-direction: row;
}
<br>
.left-side {
width: 50%;
background-color: lightblue;
}
<br>
.right-side {
width: 50%;
background-color: lightpink;
}
</style>
<br>
<div class="container">
<div class="left-side">
<p>This is the left side content.</p>
</div>
<div class="right-side">
<p>This is the right side content.</p>
</div>
</div>

第二個示例是將<div>元素水平分為兩個部分。同樣使用display屬性將<div>元素的內容水平布局，并設置flex-direction屬性為"row"。然后，我們將其中一個<div>元素設置為占據全部容器的寬度，另一個設置為自動寬度，使它們分別占據不同的空間。以下是示例代碼：

<pre>
<style>
.container {
display: flex;
flex-direction: row;
}
<br>
.left-side {
flex-grow: 1;
background-color: lightblue;
}
<br>
.right-side {
flex-grow: 0;
background-color: lightpink;
}
</style>
<br>
<div class="container">
<div class="left-side">
<p>This is the left side content.</p>
</div>
<div class="right-side">
<p>This is the right side content.</p>
</div>
</div>

第三個示例是將<div>元素使用float屬性分為兩個部分。我們可以使用float屬性來設置元素的浮動方式。將一個<div>元素設置為浮動到左側，另一個設置為浮動到右側，從而實現兩者分成兩欄的效果。以下是示例代碼：

<pre>
<style>
.left-side {
float: left;
width: 50%;
background-color: lightblue;
}
<br>
.right-side {
float: right;
width: 50%;
background-color: lightpink;
clear: right;
}
</style>
<br>
<div>
<div class="left-side">
<p>This is the left side content.</p>
</div>
<div class="right-side">
<p>This is the right side content.</p>
</div>
</div>

以上是幾個示例，展示了如何將<div>元素分為兩個部分。通過使用不同的CSS樣式，我們可以根據需要自定義分割效果和布局方式。