Html DIV 多张图文混排（文字放在图片下边）

要实现在多张图片下方添加文字的效果，同样可以使用HTML中的`<div>`和CSS中的`position`属性。

首先，将每张图片和对应的文字都放在一个`<div>`标签中，如下所示：

<div class="container">
  <div class="item">
    <img src="your-image-url1.jpg" alt="your-image1">
    <p>your text here1</p>
  </div>
  <div class="item">
    <img src="your-image-url2.jpg" alt="your-image2">
    <p>your text here2</p>
  </div>
  <div class="item">
    <img src="your-image-url3.jpg" alt="your-image3">
    <p>your text here3</p>
  </div>
</div>

然后，使用CSS对每个容器设置`position: relative`，并对每个文字设置`position: absolute`，并设置`bottom: 0`，这样就可以将每个文字放在对应的图片下方了。

.container {
  display: flex;
  justify-content: space-between;
}

.item {
  position: relative;
  flex-basis: 30%;
}

.item p {
  position: absolute;
  bottom: 0;
  width: 100%;
}

这里使用了`flex`布局来让每个容器之间有间隔，同时使用`flex-basis`来设置每个容器的宽度，可以根据需要进行调整。

完整的代码如下所示：

<div class="container">
  <div class="item">
    <img src="your-image-url1.jpg" alt="your-image1">
    <p>your text here1</p>
  </div>
  <div class="item">
    <img src="your-image-url2.jpg" alt="your-image2">
    <p>your text here2</p>
  </div>
  <div class="item">
    <img src="your-image-url3.jpg" alt="your-image3">
    <p>your text here3</p>
  </div>
</div>

<style>
  .container {
    display: flex;
    justify-content: space-between;
  }

  .item {
    position: relative;
    flex-basis: 30%;
  }

  .item p {
    position: absolute;
    bottom: 0;
    width: 100%;
  }
</style>