如何在列布局图片上添加文字？解决文字集中于最后一张图的问题

嘿，这个问题我之前也踩过坑！核心原因是你没给图片所在的列容器设置相对定位，导致你添加的文字（大概率用了绝对定位）都默认相对于页面最外层元素定位，最后全都挤到最后一张图的位置上了。

修复步骤和完整代码 #

先修改你的CSS，给.column加上position: relative，同时新增一个用于放置图片文字的样式类：

.column {
  float: left;
  width: 33.33%;
  padding: 0px;
  position: relative; /* 关键：让内部绝对定位元素以这个容器为基准 */
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

/* 图片文字的样式，可根据需求调整 */
.image-text {
  position: absolute;
  bottom: 15px; /* 距离图片底部的距离 */
  left: 15px; /* 距离图片左侧的距离 */
  color: white;
  background-color: rgba(0, 0, 0, 0.7); /* 半透明背景让文字更清晰 */
  padding: 8px 12px;
  font-size: 14px;
}

然后调整HTML结构，在每个.column内部、图片标签后添加文字容器：

<div class="row">
  <div class="column">
    <img src="./bin/images/lecture.jpg" alt="Sample lecture image">
    <div class="image-text">第一张图的文字</div>
  </div>
  <div class="column">
    <img src="./bin/images/second-img.jpg" alt="Second image">
    <div class="image-text">第二张图的文字</div>
  </div>
  <div class="column">
    <img src="./bin/images/third-img.jpg" alt="Third image">
    <div class="image-text">第三张图的文字</div>
  </div>
</div>

为什么这样能解决问题？ #

当你给.column设置position: relative后，内部所有使用position: absolute的元素都会以这个.column作为定位参考点，而不是整个页面。这样每个文字容器都会乖乖呆在对应列的图片上方，不会乱跑啦。

如果你的文字是用其他方式添加的（比如直接用span），只要确保文字元素是.column的子元素，并且.column有position: relative，再给文字设置合适的绝对定位属性，就能正常显示在对应图片上了。

内容的提问来源于stack exchange，提问作者David Farrelly