<div> 是 HTML 中的一個標簽，用于定義文檔中的一個分割或節，可以用于創建一個獨立的區塊。而在網頁設計中，<div> 標簽經常被用來包裹圖片和文字，并且通過 CSS 樣式來控制它們的布局和樣式。本文將通過幾個示例來詳細解釋如何使用 <div> 來實現圖片和文字的組合效果。
第一個例子是常見的圖片和文字并排顯示的布局。通過使用兩個 <div> 標簽分別包裹圖片和文字，可以實現他們的并排效果。下面是示例代碼：

<div class="image">
<img src="image.jpg" alt="圖片">
</div>
<div class="text">
<p>這是一段文字描述</p>
</div>

在上述示例中，我們創建了一個名為 "image" 的 <div> 標簽來包含圖片，再創建一個名為 "text" 的 <div> 標簽來包含文字。通過給這些 <div> 標簽添加不同的 CSS 類名，我們可以對圖片和文字進行不同的樣式設置，比如大小、位置、背景等。
第二個例子是圖片和文字疊加顯示的效果。通過使用一個 <div> 標簽作為容器，再在其中嵌套一個 <img> 標簽和一個

標簽，可以實現圖片和文字的疊加效果。下面是示例代碼：

<div class="container">
<img src="image.jpg" alt="圖片">
<p class="overlay">這是一段文字描述</p>
</div>

在這個示例中，我們創建了一個名為 "container" 的 <div> 標簽作為圖片和文字的容器。然后在容器中嵌套了一個 <img> 標簽用來顯示圖片，以及一個

標簽用來顯示文字描述。為了實現疊加效果，我們可以通過為文字的

標簽添加一個名為 "overlay" 的 CSS 類，設置合適的透明度和位置。
第三個例子是圖片背景和文字的組合效果。通過將圖片作為容器或文本區塊的背景，可以實現更加靈活的布局效果。下面是一個示例代碼：

<div class="container" style="background-image: url('image.jpg')">
<p>這是一段文字描述</p>
</div>

在這個示例中，我們創建了一個名為 "container" 的 <div> 標簽作為文本區塊的容器。通過設置容器的背景圖像為圖片，我們可以用背景圖片來替代傳統的 <img> 標簽顯示圖片。同時，我們可以在容器中添加文字描述，通過修改容器的 CSS 樣式來控制文字的布局和樣式。
通過上述示例，我們可以發現使用 <div> 標簽來組合圖片和文字是一種非常靈活和常見的網頁設計方法。通過合適的 CSS 樣式設置，可以實現各種圖片和文字的組合效果，包括并排顯示、疊加顯示和背景顯示等。這不僅能夠提升頁面的美觀性和交互性，也能夠更好地展示圖片和文字的內容和意義。同時，<div> 標簽的使用也為后續的樣式和布局調整提供了便利，使得我們可以更好地對頁面進行維護和更新。