在網頁開發中，div 左邊 右邊是一個常見的布局需求，即將一個容器(<div>)分為兩部分，分別位于左邊和右邊。這樣的布局可以用來將頁面的不同元素進行合理的排列和組織，提高用戶的瀏覽體驗。

代碼案例一：使用float屬性實現

一種常見的實現方式是使用CSS的float屬性。我們可以給左右兩個部分分別設置一個占據一定寬度的<div>，并通過設置float屬性使其分別向左或向右浮動。下面是一個示例：

<style>
.left {
width: 200px;
float: left;
}
<br>
      .right {
width: 200px;
float: right;
}
</style>
<br>
    <div class="left">
// 左邊的內容
</div>
<br>
    <div class="right">
// 右邊的內容
</div>

在上面的代碼中，我們定義了兩個<div>，分別擁有200像素的寬度，并通過設置float屬性使其分別靠左和靠右浮動。這樣就實現了將頁面布局分為左右兩個部分的效果。

代碼案例二：使用flexbox實現

另一種實現方式是使用CSS的flexbox布局。Flexbox布局提供了強大的靈活性和適應性，適用于各種復雜的布局需求。下面是一個示例：

<style>
.container {
display: flex;
}
<br>
      .left {
flex: 1;
}
<br>
      .right {
flex: 1;
}
</style>
<br>
    <div class="container">
<div class="left">
// 左邊的內容
</div>
<br>
      <div class="right">
// 右邊的內容
</div>
</div>

在上面的代碼中，我們定義了一個<div>容器，使用display屬性將其設為flex。然后，我們給左右兩個部分設置了flex屬性為1，使它們平均占據容器的剩余空間，實現左右分布的效果。

代碼案例三：使用grid布局實現

還有一種實現方式是使用CSS的grid布局，grid布局提供了更強大的網格控制能力，能夠更精確地定位和排列元素。下面是一個示例：

<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
<br>
      .left {
grid-column: 1;
}
<br>
      .right {
grid-column: 2;
}
</style>
<br>
    <div class="container">
<div class="left">
// 左邊的內容
</div>
<br>
      <div class="right">
// 右邊的內容
</div>
</div>

在上面的代碼中，我們定義了一個<div>容器，使用display屬性將其設為grid。然后，通過grid-template-columns屬性定義了兩列等寬的網格。而左右兩個部分通過grid-column屬性指定所處的網格列，從而實現左右分布的效果。

綜上所述，我們可以通過不同的CSS技術實現div 左邊 右邊的布局需求，如使用float屬性、flexbox布局或grid布局。根據實際情況和需求，選擇合適的方式進行布局設計，以達到最佳的用戶體驗和頁面效果。