<div>與布局
<div>，即division的縮寫，是HTML語言中的一個標簽，用于將HTML文檔劃分為不同的區塊。在網頁布局中，<div>標簽被廣泛應用，用來創建和控制網頁的各個部分的布局。它通過設置CSS樣式，可以實現各種不同的布局效果，使得網頁具備更好的可讀性和可訪問性。下面通過幾個代碼案例來詳細解釋<div>與布局的應用。
第一個代碼案例是一個簡單的兩欄布局，其中左欄寬度固定，右欄自適應寬度。代碼如下：

<p><div class="container"></p>
<p>    <div class="left-column"></p>
<p>        <p>左欄內容</p></p>
<p>    </div></p>
<p>    <div class="right-column"></p>
<p>        <p>右欄內容</p></p>
<p>    </div></p>
<p></div></p>

上述代碼中，使用一個包含兩個<div>的容器<div class="container">來實現布局。左欄和右欄分別使用<div class="left-column">和<div class="right-column">進行定義。通過設置CSS樣式，可以使左欄具有固定寬度，而右欄則根據剩余空間自適應。
第二個代碼案例是一個常見的三欄布局，其中左右兩欄寬度固定，中間欄自適應寬度。代碼如下：

<p><div class="container"></p>
<p>    <div class="left-column"></p>
<p>        <p>左欄內容</p></p>
<p>    </div></p>
<p>    <div class="middle-column"></p>
<p>        <p>中欄內容</p></p>
<p>    </div></p>
<p>    <div class="right-column"></p>
<p>        <p>右欄內容</p></p>
<p>    </div></p>
<p></div></p>

在上述代碼中，同樣使用一個<div class="container">容器來實現整體布局，左欄和右欄寬度都是固定的，并分別使用<div class="left-column">和<div class="right-column">進行定義。而中欄則使用<div class="middle-column">，利用CSS樣式設置其寬度為100%，并根據需要進行調整。
第三個代碼案例是一個響應式布局，適應不同屏幕尺寸的設備。代碼如下：

<p><div class="container"></p>
<p>    <div class="left-column"></p>
<p>        <p>左欄內容</p></p>
<p>    </div></p>
<p>    <div class="right-column"></p>
<p>        <p>右欄內容</p></p>
<p>    </div></p>
<p></div></p>
<p><style></p>
<p>    .container {</p>
<p>        display: flex;</p>
<p>        flex-wrap: wrap;</p>
<p>    </style></p>

以上代碼中，容器<div class="container">使用flex布局，通過設置display屬性為flex，可以使內部元素按照一定的彈性規則進行布局。當屏幕尺寸較小時，右欄會自動下移，以適應不同的顯示效果。
通過以上幾個代碼案例，我們可以看到<div>標簽在網頁布局中的應用。通過合理地設置CSS樣式，可以實現不同的布局效果，使網頁具備良好的可讀性和可訪問性。在實際開發中，我們可以根據需要靈活運用<div>來實現各種復雜的布局，提高網頁的用戶體驗。