下面是一個簡單的代碼示例，展示了如何在<div>中使用列：
<div style="display: flex;"> <div style="flex: 1;"> <h2>第一列</h2> <p>這是第一列的內容。</p> </div> <div style="flex: 1;"> <h2>第二列</h2> <p>這是第二列的內容。</p> </div> <div style="flex: 1;"> <h2>第三列</h2> <p>這是第三列的內容。</p> </div> </div>
以上代碼創建了一個包含三列的布局。每個列都被包裹在一個<div>元素內，并使用了display: flex屬性，使其變為一個彈性容器。這意味著列將以水平方向排列在一行中，且每個列的寬度將根據內容自動調整。
接下來，我們將看一個更復雜的列布局示例。假設我們有一個網頁，其中包含一個導航欄、一個側邊欄和一個主內容區域。下面是相應的代碼：
<div style="display: flex;"> <div style="flex-basis: 20%;"> <h2>導航欄</h2> <p>這是導航欄的內容。</p> </div> <div style="flex-basis: 20%;"> <h2>側邊欄</h2> <p>這是側邊欄的內容。</p> </div> <div style="flex-basis: 60%;"> <h2>主內容區域</h2> <p>這是主內容區域的內容。</p> </div> </div>
在這個例子中，我們使用了flex-basis屬性來指定每個列的初始寬度所占的比例。導航欄和側邊欄各占據總寬度的20%，而主內容區域占據總寬度的60%。這樣一來，當網頁被調整大小時，每個列的寬度都會相應地調整，以適應不同的屏幕或設備。
除了使用彈性容器的方式，我們還可以使用柵格系統來創建<div>中的列布局。柵格系統是一種將頁面水平劃分為固定列數的布局模式。下面是一個使用柵格系統的例子：
<div class="row"> <div class="col-4"> <h2>第一列</h2> <p>這是第一列的內容。</p> </div> <div class="col-4"> <h2>第二列</h2> <p>這是第二列的內容。</p> </div> <div class="col-4"> <h2>第三列</h2> <p>這是第三列的內容。</p> </div> </div>
上述代碼使用了一個row類和col-4類來定義列的樣式。row類將行中的列緊密排列，并支持響應式布局。col-4類指定每個列占據父容器的四分之一寬度。通過調整col-4類中的數字，我們可以改變列的寬度比例。
在實際應用中，<div>中的列布局常用于創建響應式網頁、多欄布局和網站導航等。下面是一些真實案例的參考：
1. 京東商城首頁使用了<div>中的列布局來展示各類商品的小卡片。每個小卡片都被包裹在一個<div>元素內，并使用了相應的CSS樣式來控制樣式和布局。
2. 嗶哩嗶哩（Bilibili）視頻網站的視頻詳情頁使用了<div>中的列布局來展示視頻、評論和相關推薦等內容。每個內容塊都被包裹在一個<div>元素內，并使用了柵格系統和彈性容器來實現適應不同屏幕和設備的布局。
總之，<div>中的列是一種非常有用的工具，可以幫助我們創建靈活、有條理的網頁布局。通過掌握這些基本概念和代碼示例，我們可以更好地應用<div>中的列來提升網頁的用戶體驗和界面設計。