<div>和<img>標簽是HTML中常用的兩個標簽，它們經常用來實現圖片和文本的同行顯示。本文將詳細介紹如何使用<div>和<img>標簽實現這一效果，并給出幾個代碼案例進行說明。
<div>是一個通用的容器標簽，用于將HTML文檔分割成不同的區域或塊。它可以容納其他HTML元素，如文本、圖片、表格等。使用<div>標簽可以輕松地將不同的元素組合在一起，并控制它們的布局和樣式。
<img>是用于插入圖片的標簽，它需要一個src屬性來指定圖片的URL。使用<img>標簽可以將圖片插入到HTML文檔中，并設置圖片的大小、對齊方式等屬性。然而，<img>標簽默認是行內元素，即圖片會在文本的基線上顯示，無法與文本同行。要實現圖片和文本的同行顯示，我們可以使用<div>標簽來包裹<img>標簽，并設置相應的樣式。
下面是幾個代碼案例，演示了如何使用<div>和<img>標簽實現圖片和文本的同行顯示。
第一個案例中，我們將一張圖片和一段文本放在一個<div>容器中，并設置<div>標簽的display屬性為inline-block，使<div>在同一行內顯示。

<style>
.container {
display: inline-block;
}
</style>
<p><div class="container">
<img src="image.jpg" alt="圖片">
<p>這是一段描述文字。</p>
</div></p>

執行以上代碼，我們可以看到圖片和文本在同一行內顯示。這是因為<div>標簽被設置為inline-block，可以與其他行內元素同行顯示。
第二個案例中，我們將圖片和文本放在兩個<div>容器中，并設置<div>標簽的float屬性，使<div>在同一行內浮動。

<style>
.container1 {
float: left;
}
.container2 {
float: left;
}
</style>
<p><div class="container1">
<img src="image.jpg" alt="圖片">
</div>
<div class="container2">
<p>這是一段描述文字。</p>
</div></p>

執行以上代碼，我們可以看到圖片和文本同樣在同一行內顯示。這是因為兩個<div>容器都被設置為浮動，可以并排顯示在一行內。
第三個案例中，我們將圖片和文本分別放在兩個<div>容器中，然后使用CSS的flex布局來實現同行顯示。

<style>
.container {
display: flex;
align-items: center;
}
</style>
<p><div class="container">
<div>
<img src="image.jpg" alt="圖片">
</div>
<div>
<p>這是一段描述文字。</p>
</div>
</div></p>

執行以上代碼，我們可以看到圖片和文本依然在同一行內顯示。這是因為<div>容器被設置為flex布局，在主軸上按需分配空間，使其中的元素排列在一行內。
通過以上幾個代碼案例，我們了解了如何使用<div>和<img>標簽實現圖片和文本的同行顯示。無論是設置display屬性、float屬性，還是使用flex布局，都可以實現這一效果。根據實際需求選擇合適的方法，即可輕松實現同行顯示的效果。