實例一：兩列等高布局

兩列等高布局是常見的網頁布局之一，它可以將兩個列元素的高度保持一致，使頁面更加統一。例如，我們在網頁中有一個左側導航欄和右側內容區，希望它們的高度相等。

<div class="container">
<div class="sidebar">
導航欄內容
</div>
<div class="content">
內容區域內容
</div>
</div>

上述代碼中，我們使用了flex布局的方式實現兩列等高布局。通過設置.container為flex布局，使得.container內的元素可以按照比例自動伸縮。而通過給.sidebar和.content設置flex: 1，它們將按照相等的比例占據.container的寬度，從而實現了兩列等高布局。

實例二：三列布局

三列布局是網頁中常見的一種布局方式，例如網頁的頁腳和側邊欄之類的內容可以用三列布局來實現。以下是一個簡單的三列布局示例：

<div class="container">
<div class="left">
左側欄內容
</div>
<div class="main">
主內容區域
</div>
<div class="right">
右側欄內容
</div>
</div>

上述代碼中，我們同樣使用了flex布局的方式實現了三列布局。通過設置.container為flex布局，讓.container內的元素按比例自動伸縮。同時給.left、.main、.right設置了flex: 1，它們將按照相等的比例占據.container的寬度。通過在左、右側欄設置margin屬性，實現了邊距效果。

實例三：響應式布局

在移動設備普及的今天，響應式布局變得越來越重要。響應式布局可以根據不同設備的屏幕大小和分辨率來自適應地調整頁面的布局和樣式，使得頁面在不同設備上都能有良好的顯示效果。

<div class="container">
<div class="left">
左側欄
</div>
<div class="main">
主要內容
</div>
<div class="right">
右側欄
</div>
</div>

上述代碼中，我們使用了flex布局，并通過設置container的flex-wrap屬性為wrap，實現了響應式布局。通過設置.left、.main、.right的寬度為100%，在屏幕較小的設備上它們會自動換行顯示。而在@media查詢中，我們針對屏幕寬度大于768px的設備重新設置了.left、.main、.right的寬度，實現了柵格布局的效果。

結論

通過以上的實例，我們可以看到div布局是一種非常靈活和常用的布局方式。它可以用于實現兩列等高布局、三列布局以及響應式布局等各種常見的頁面布局。在使用div布局時，我們可以根據實際需求選擇不同的方式來實現并配合CSS進行樣式調整。在實際的網頁開發中，我們可以根據項目的需求和實際情況來選擇合適的div布局方式，以實現頁面的美觀和良好的用戶體驗。