<div>標簽是HTML中的一個容器，可以用來包裹其他HTML元素。在頁面設計中，經常會遇到需要將圖片和文字放在一起展示的情況。使用<div>標簽可以很方便地實現這種效果。本文將通過幾個代碼案例來詳細說明如何使用<div>標簽來實現圖片與文字的組合展示效果。
第一個案例是將圖片和文字并排展示。通過使用<div>標簽包裹圖片和文字元素，并設置合適的樣式，可以實現并排顯示的效果。下面是一個簡單示例：

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

在上面的代碼中，我們創建了一個包裹容器<div class="container">。在容器內部，我們放置了一個<img>標簽用來展示圖片，以及一個

標簽用來展示文字。通過為容器和子元素設置相應的類名，我們可以通過CSS樣式來設置圖片和文字的排列方式、大小以及間距等樣式。
第二個案例是將圖片和文字垂直居中展示。有時候我們希望圖片和文字在垂直方向上居中顯示，可以通過設置容器的display屬性為flex，再利用flex布局來實現。下面是一個示例代碼：

<div class="container align-center">
<img src="image.jpg" alt="圖片" class="image">
<p class="text">這是一段文字內容</p>
</div>

在上面的代碼中，我們為容器增加了一個額外的類名align-center，并通過CSS樣式設置容器的display屬性為flex，使其使用flex布局。這樣圖片和文字就會在垂直方向上居中顯示。
第三個案例是實現圖片與文字的覆蓋效果。有些時候我們希望圖片能夠完全覆蓋文字并且響應鼠標懸停事件，可以將圖片設置為容器的背景圖，并通過設置背景尺寸和位置來實現。下面是一個示例代碼：

<div class="container">
<div class="image-overlay"></div>
<p class="text">這是一段文字內容</p>
</div>

CSS樣式如下：

.container {
position: relative;
width: 400px;
height: 300px;
}
.image-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('image.jpg') no-repeat center center/cover;
}
.text {
position: relative;
z-index: 1;
}

在上面的代碼中，我們創建了一個包裹容器<div class="container">。在容器內部，我們創建了一個<div>元素，并通過CSS樣式設置其為容器的背景圖，并將其覆蓋在文字上方。通過設置容器的position屬性為relative，使得文字在圖片上方。
通過以上幾個案例，我們可以看到通過使用<div>標簽結合CSS樣式，我們可以很方便地實現圖片與文字的組合展示效果。不同的樣式設置以及CSS屬性的使用可以實現不同的展示效果。