，我們來看一個(gè)簡單的例子。假設(shè)我們要將一段文字和一張圖片在網(wǎng)頁上進(jìn)行排版，使它們分別位于網(wǎng)頁的左右兩側(cè)。我們可以使用以下的代碼來實(shí)現(xiàn)這個(gè)效果：
<div style="display: flex;"> <div style="flex: 1;"> <p>這是一段文字</p> </div> <div style="flex: 1;"> <img src="image.jpg" alt="圖片"> </div> </div>
上述代碼使用了display屬性的flex值。該值將元素以彈性盒模型的形式排列，<div>元素的直接子元素會一行排列，并且能夠自動伸縮以填充剩余空間。通過在每個(gè)子元素（<div>中的
和<img>）上設(shè)置flex屬性的值為1，使它們平均占據(jù)一行的寬度，從而實(shí)現(xiàn)左右排版的效果。
接下來，我們來看一個(gè)更復(fù)雜的例子。假設(shè)我們要實(shí)現(xiàn)一個(gè)三欄布局，左右兩欄寬度固定，中間一欄自適應(yīng)寬度。我們可以使用以下的代碼來實(shí)現(xiàn)這個(gè)布局：
<div style="display: flex;"> <div style="width: 200px;"> <p>左側(cè)欄</p> </div> <div style="flex: 1;"> <p>中間欄</p> </div> <div style="width: 200px;"> <p>右側(cè)欄</p> </div> </div>
上述代碼中，我們在左右兩欄的<div>元素上設(shè)置了固定的寬度為200px，中間欄的<div>元素設(shè)置了flex屬性的值為1，使其自動伸縮以填充剩余空間。這樣，無論瀏覽器窗口的寬度如何變化，三欄布局都能夠保持穩(wěn)定的狀態(tài)。
最后，我們來看一個(gè)利用<div>實(shí)現(xiàn)響應(yīng)式網(wǎng)頁的例子。假設(shè)我們要實(shí)現(xiàn)一個(gè)在不同屏幕尺寸下有不同布局的網(wǎng)頁。我們可以使用以下的代碼來實(shí)現(xiàn)這個(gè)效果：
<div style="display: flex; flex-wrap: wrap;"> <div style="flex-basis: 100%;"> <p>全屏寬度的內(nèi)容</p> </div> <div style="flex-basis: 50%;"> <p>一半屏幕寬度的內(nèi)容</p> </div> <div style="flex-basis: 50%;"> <p>一半屏幕寬度的內(nèi)容</p> </div> <div style="flex-basis: 33.33%;"> <p>三分之一屏幕寬度的內(nèi)容</p> </div> <div style="flex-basis: 33.33%;"> <p>三分之一屏幕寬度的內(nèi)容</p> </div> <div style="flex-basis: 33.33%;"> <p>三分之一屏幕寬度的內(nèi)容</p> </div> </div>
上述代碼中，我們在每個(gè)<div>元素上使用了flex-basis屬性來設(shè)置元素的初始寬度。通過調(diào)整各個(gè)元素的flex-basis屬性的值，我們可以實(shí)現(xiàn)響應(yīng)式的布局效果，使頁面在不同屏幕尺寸下有不同的顯示效果。
通過以上的代碼案例和解釋，我們可以看到使用<div>進(jìn)行網(wǎng)頁排版可以實(shí)現(xiàn)各種靈活的布局效果，并且應(yīng)用廣泛。掌握<div>網(wǎng)頁排版的基本原理和使用方法可以幫助我們更好地設(shè)計(jì)和開發(fā)網(wǎng)頁，提升用戶體驗(yàn)。