如何将标题div自适应定位在图片底部（适配高度变化，支持Bootstrap）

嘿，我完全懂你现在的困扰——靠固定margin值定位标题栏，一旦标题内容变多、高度改变，整个布局就乱了对吧？刚好你在用Bootstrap，咱们可以结合它的内置布局类+一点点自定义CSS，彻底解决这个自适应定位的问题，再也不用依赖固定数值啦！

核心思路 #

1. 调整HTML结构：把图片和标题栏放在同一个相对定位的容器里，这样标题的绝对定位就会以图片容器为基准，而不是随便找父元素
2. 用bottom: 0替代固定margin：让标题栏始终贴在容器底部，不管标题自身高度怎么变，都会从底部向上延伸，不会错位

修改后的完整代码 #

HTML部分

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<div class="col-md-4">
  <div class="archive-post-small">
    <!-- 把图片和标题都放进这个相对定位的容器里 -->
    <div class="archive-post-small-thumbnail-title-wrapper position-relative">
      <img class="archive-post-small-thumbnail" style="object-fit: cover" src="https://instawp.com/wp-content/uploads/2024/05/icon-256x256-399.webp" width="100%" height="250px">
      <div class="archive-post-small-thumbnail-title">
        <h5>Title of the post</h5>
        <!-- 可以多加点内容测试高度变化，比如再加一行文字 -->
        <!-- <p>这是副标题，测试标题高度变化的情况</p> -->
      </div>
    </div>
    <div class="archive-post-top-wrapper p-3">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies vulputate augue.
      <div class="position-relative" style="padding-top: 30px">
        <div class="position-absolute bottom-0 end-0">
          <a class="btn btn-primary" href="<?php the_permalink();?>">Read More...</a>
        </div>
      </div>
    </div>
  </div>
</div>

CSS部分

.archive-post-small {
  background-color: #eff5fa;
  margin-left: -12px;
  margin-bottom: 12px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  border-radius: 3px;
  overflow: hidden; /* 确保标题的圆角不会超出容器 */
}

.archive-post-small-thumbnail {
  border-radius: 3px;
  display: block; /* 消除图片下方的空白间隙 */
}

.archive-post-small-thumbnail-title-wrapper {
  /* 用Bootstrap的position-relative就够了，不用重复写 */
}

.archive-post-small-thumbnail-title {
  position: absolute;
  width: 100%;
  padding: 8px 2px; /* 把padding改得更合理，避免内容贴边 */
  bottom: 0; /* 关键！让标题始终贴在容器底部 */
  color: whitesmoke;
  background-color: rgba(0, 0, 0, 0.5);
  text-shadow: 1px 1px 2px #000;
  border-radius: 0 0 3px 3px; /* 调整圆角，和图片底部圆角对应 */
}

关键细节说明 #

• 我把图片移到了标题的前面，这样标题的绝对定位会覆盖在图片上方，这才是你要的效果
• 用bottom: 0替代了原来的margin-top: 195px，不管标题高度是多少，都会牢牢贴在图片底部
• 给.archive-post-small加了overflow: hidden，避免标题的圆角超出容器范围
• 调整了标题的padding，让内容看起来更舒服，不会挤在边缘

现在你可以随便修改标题的内容，不管它变高还是变矮，都会完美贴合在图片底部啦！

内容来源于stack exchange