在網(wǎng)頁設(shè)計(jì)中，使用DIV和CSS的組合可以為我們的網(wǎng)頁制作帶有圖文的布局，可以使得網(wǎng)頁的內(nèi)容看起來更加美觀、優(yōu)雅。今天，我們就來學(xué)習(xí)一下如何使用DIV和CSS來制作圖文布局吧！

<div class="wrapper">
<img src="image1.jpg" alt="圖片1"/>
<p>這是一段文字描述圖片一的內(nèi)容</p>
</div>
<div class="wrapper">
<p>這是一段文字描述圖片二的內(nèi)容</p>
<img src="image2.jpg" alt="圖片2"/>
</div>

以上是一個(gè)簡單的圖文布局的HTML代碼，我們可以通過CSS來為這個(gè)布局添加樣式。比如我們可以為每個(gè)wrapper添加一個(gè)寬度，從而讓圖片和文字按照我們期望的比例排列。

.wrapper{
display: flex;
width: 100%;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.wrapper img{
width: 50%;
max-width: 500px;
margin-right: 20px;
}
.wrapper p{
width: 50%;
margin-left: 20px;
}

以上是這個(gè)圖文布局的CSS樣式代碼，我們使用了display：flex這個(gè)屬性來讓圖片和文字居中對齊，通過width和max-width來控制圖片和文字的大小和寬度，margin屬性來控制元素的間距。

通過這個(gè)簡單的示例，我們了解了如何使用DIV和CSS來制作圖文布局，當(dāng)然以上只是一個(gè)簡單的示例，我們還可以根據(jù)需要對樣式進(jìn)行更加復(fù)雜的處理，達(dá)到更加豐富的布局效果。