在網頁設計中，我們經常會遇到需要將一個div分成兩個對稱的水平部分的情況。這種布局方式可以通過使用CSS和HTML來實現。本文將詳細介紹幾個代碼案例，以幫助讀者更好地理解和實踐這種布局方式。
，我們來看一個基本的例子。假設我們有一個div，需要將其分成左右兩個對稱的水平部分。可以使用CSS中的float屬性來實現這一效果。下面是一個示例代碼：

<div class="container">
<div class="left">
<p>左側內容</p>
</div>
<div class="right">
<p>右側內容</p>
</div>
</div>

.container {
width: 100%;
height: 200px;
}
<br>
.left {
width: 50%;
height: 100%;
float: left;
background-color: #ccc;
}
<br>
.right {
width: 50%;
height: 100%;
float: right;
background-color: #eee;
}

在上面的代碼中，我們創建了一個名為container的div，并設置其寬度和高度。然后，我們創建了兩個子div，分別是left和right。我們通過設置這兩個子div的寬度為50%，將其分成了兩個對稱的水平部分。接下來，我們使用float屬性將left和right分別浮動到左側和右側。
除了使用float屬性之外，還可以使用flexbox模型來實現div中兩個對稱的水平部分。下面是一個示例代碼：

<div class="container">
<div class="left">
<p>左側內容</p>
</div>
<div class="right">
<p>右側內容</p>
</div>
</div>

.container {
display: flex;
width: 100%;
justify-content: space-between;
}
<br>
.left, .right {
width: 50%;
height: 100%;
background-color: #ccc;
}

在上面的代碼中，我們使用了flexbox模型來布局div中的兩個對稱水平部分。我們將.container的display屬性設置為flex，這樣.container的子元素就會成為彈性盒子。然后，通過設置justify-content屬性為space-between，將兩個子元素分別放置在左右兩側，并且兩個子元素之間有一定的間距。最后，我們設置.left和.right的寬度為50%，來保證它們分別占據整個容器的一半空間。
通過以上兩個例子，我們可以看到如何使用CSS和HTML將一個div分成兩個對稱的水平部分。無論是使用float屬性還是flexbox模型，都可以根據實際需要選擇適合的方法來實現對稱布局。希望本文能夠對讀者在網頁設計中實現這種布局方式提供幫助。