<div>是HTML中常用的一個標簽，用于定義一個容器，用來包裹其他元素。有時候我們需要在一個<div>中同時顯示兩個子元素，并且要求這兩個子元素并列顯示。下面將通過幾個代碼案例來詳細說明如何在<div>中實現兩個子元素并列顯示的效果。
案例一： 在這個案例中，我們將使用CSS的float屬性來實現<div>中兩個子元素并列顯示的效果。定義一個<div>作為容器，然后分別在里面定義兩個子<div>元素，并對其設置float屬性為left和right。

HTML代碼如下：

<div class="container">
<div class="left">
<p>這是左側元素</p>
</div>
<div class="right">
<p>這是右側元素</p>
</div>
</div>

CSS代碼如下：

.container {
overflow: auto;
}
<br>
.left {
float: left;
width: 50%;
}
<br>
.right {
float: right;
width: 50%;
}

可以看到，通過設置兩個子<div>元素的float屬性為left和right，它們就能并列顯示在<div>容器中。

案例二： 如果希望兩個子元素的寬度可以根據內容自動調整，并且它們能夠在同一行顯示，可以使用display屬性為inline-block的方法。

HTML代碼如下：

<div class="container">
<div class="left">
<p>這是左側元素</p>
</div>
<div class="right">
<p>這是右側元素</p>
</div>
</div>

CSS代碼如下：

.container {
font-size: 0; /* 將父容器字體大小設置為0，消除空格間隙 */
width: 100%;
}
<br>
.left,
.right {
display: inline-block;
font-size: 16px; /* 恢復子元素字體大小 */
width: auto; /* 寬度自動調整 */
}
<br>
.left {
background-color: lightblue;
}
<br>
.right {
background-color: lightpink;
}

在這個案例中，通過設置子<div>元素的display屬性為inline-block，它們就可以在同一行顯示，并且寬度會根據內容自動調整。
通過上述兩個案例的說明，我們可以看到在<div>中實現兩個子元素并列顯示的方法比較簡單。可以根據具體的需求選擇使用CSS的float屬性或者display屬性為inline-block來實現這個效果。希望這篇文章能對你有所幫助！