<div> 是 HTML 中的一個標簽，用于創建一個容器，將其他元素放置在其中。默認情況下，<div> 元素是一個塊級元素，它會占據一整行的寬度。然而，有時候我們希望將頁面的內容分為兩部分，左邊放置一些內容，右邊放置另一些內容。在這種情況下，我們可以使用 CSS 來將 <div> 左右分開，使其顯示為并排的兩個容器。
下面通過幾個案例來詳細說明如何將 <div> 左右分開的方法。
案例一： 假設我們有這樣的需求，頁面上有一個一欄左側的導航菜單欄，右側是一個主內容區域。我們希望這兩部分能夠并排顯示，左側導航菜單欄寬度固定，右側內容區域自適應屏幕寬度。

html
<style>
.container {
display: flex;
}
.sidebar {
width: 200px;
background-color: #f0f0f0;
}
.content {
flex: 1;
background-color: #e0e0e0;
}
</style>
<br>
<div class="container">
<div class="sidebar">
<p>這是導航菜單欄</p>
</div>
<div class="content">
<p>這是主內容區域</p>
</div>
</div>

在上述代碼中，我們使用了 CSS 的 flex 布局來實現 <div> 左右分開。通過設置display: flex;，將容器設置為彈性布局。左側的導航菜單欄的寬度固定為200px，右側的內容區域使用flex: 1;，表示它會占據剩余的所有可用空間。
案例二： 有時候我們希望左右兩個 <div> 的寬度一樣，并且居中顯示。下面是一個案例：

html
<style>
.container {
display: flex;
}
.left-side, .right-side {
flex: 1;
text-align: center;
}
.left-side {
background-color: #f0f0f0;
}
.right-side {
background-color: #e0e0e0;
}
</style>
<br>
<div class="container">
<div class="left-side">
<p>左側內容</p>
</div>
<div class="right-side"> 
<p>右側內容</p>
</div>
</div>

在上述代碼中，我們同樣使用了 CSS 的 flex 布局。通過設置display: flex;，將容器設置為彈性布局。左側和右側的 <div> 都使用flex: 1;，這樣它們的寬度就會均分剩余的空間。這樣設置后，兩個 <div> 會自動居中顯示。
： 在 HTML 和 CSS 中，我們可以通過使用 <div> 元素和 flex 布局來將 <div> 左右分開。這種方法可以靈活地實現各種不同樣式的布局。通過設置不同的樣式，可以實現左右兩個容器的寬度固定或自適應，居中或其他位置的顯示。以上是兩個簡單的案例，你可以根據實際需求進行修改和擴展，實現更復雜的布局效果。