<div>是HTML中用來創建塊級元素的標簽，常用于網頁布局中創建多欄的結構。通過使用<div>標簽和CSS樣式，可以創建兩欄布局，其中一欄通常用于導航欄或側邊欄，另一欄用于主要內容區域。以下是幾個代碼案例，詳細解釋如何使用<div>創建兩欄布局。
第一個案例是簡單的兩欄布局，其中一欄寬度固定，另一欄自適應寬度。請看下面的示例代碼：

<div style="width: 200px; float: left;">
<!-- 左側固定寬度的欄目內容 -->
</div>
<br>
<div style="margin-left: 200px;">
<!-- 右側自適應寬度的欄目內容 -->
</div>

在這個案例中，第一個<div>標簽設置了固定寬度為200px，并使用了float:left屬性將其置于左側。第二個<div>標簽沒有指定寬度，而是通過設置margin-left為200px來實現右側內容自適應寬度。利用float屬性可以使兩欄并排顯示，其中左側欄固定寬度，右側欄自動填充剩余寬度。
第二個案例是使用flexbox布局實現的兩欄布局。flexbox是一種靈活的布局模型，可以方便地實現各種布局需求。以下是一個使用flexbox布局的示例代碼：

<div style="display: flex;">
<div style="width: 200px;">
<!-- 左側固定寬度的欄目內容 -->
</div>
<br>
    <div style="flex-grow: 1;">
<!-- 右側自適應寬度的欄目內容 -->
</div>
</div>

在這個案例中，父級<div>標簽設置了display:flex屬性，將其內部元素以彈性布局排列。第一個子<div>標簽設置寬度為200px，即左側固定寬度的欄目。第二個子<div>標簽使用flex-grow:1屬性，表示其將自動填充剩余的寬度，即右側自適應寬度的欄目。
第三個案例是使用CSS Grid布局實現的兩欄布局。CSS Grid是一種二維網格布局模型，通過設置網格列可以輕松實現多欄布局。以下是一個使用CSS Grid布局的示例代碼：

<div style="display: grid; grid-template-columns: 200px auto;">
<div>
<!-- 左側固定寬度的欄目內容 -->
</div>
<br>
    <div>
<!-- 右側自適應寬度的欄目內容 -->
</div>
</div>

在這個案例中，父級<div>標簽設置了display:grid屬性，表示啟用網格布局。通過grid-template-columns屬性，將頁面分為兩列，第一列寬度為200px，即左側欄目的固定寬度，第二列使用auto表示自動填充剩余的寬度，即右側欄目的自適應寬度。
通過上述幾個案例，我們可以看到<div>標簽結合不同的CSS布局模型可以實現各種不同類型的兩欄布局。無論是固定寬度和自適應寬度的搭配，還是通過彈性布局和網格布局實現的靈活布局，都可以根據實際需求選擇合適的方法來創建理想的兩欄布局。