實(shí)例一：兩列等高布局

兩列等高布局是常見的網(wǎng)頁布局之一，它可以將兩個(gè)列元素的高度保持一致，使頁面更加統(tǒng)一。例如，我們?cè)诰W(wǎng)頁中有一個(gè)左側(cè)導(dǎo)航欄和右側(cè)內(nèi)容區(qū)，希望它們的高度相等。

<div class="container">
<div class="sidebar">
導(dǎo)航欄內(nèi)容
</div>
<div class="content">
內(nèi)容區(qū)域內(nèi)容
</div>
</div>

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

實(shí)例二：三列布局

三列布局是網(wǎng)頁中常見的一種布局方式，例如網(wǎng)頁的頁腳和側(cè)邊欄之類的內(nèi)容可以用三列布局來實(shí)現(xiàn)。以下是一個(gè)簡(jiǎn)單的三列布局示例：

<div class="container">
<div class="left">
左側(cè)欄內(nèi)容
</div>
<div class="main">
主內(nèi)容區(qū)域
</div>
<div class="right">
右側(cè)欄內(nèi)容
</div>
</div>

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

實(shí)例三：響應(yīng)式布局

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

<div class="container">
<div class="left">
左側(cè)欄
</div>
<div class="main">
主要內(nèi)容
</div>
<div class="right">
右側(cè)欄
</div>
</div>

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

結(jié)論

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