如何将img1盒子置于图片下方并匹配尺寸且避免重叠？

核心思路 #

把每张主图片和对应的img1盒子包裹在独立容器里，让它们成为一个完整排版单元，避免干扰其他内容；利用块级元素特性让img1自动排在图片下方，用CSS计算属性设置目标高度。

修改后的HTML结构 #

<!-- 第一组：主图片+img1盒子 -->
<div class="image-group">
  <img src="你的主图片地址" class="main-img" alt="主图片">
  <div class="img1">
    <img src="内部图片地址" alt="内部配图">
    <p>这里是需要展示的文本内容</p>
  </div>
</div>

<!-- 第二组：重复相同结构 -->
<div class="image-group">
  <img src="第二个主图片地址" class="main-img" alt="主图片">
  <div class="img1">
    <!-- 第二组的内部内容 -->
  </div>
</div>

修改后的CSS代码 #

/* 每组图片的容器，作为独立排版单元 */
.image-group {
  /* 可选：给每组加底部间距，避免和下一组挤在一起 */
  margin-bottom: 20px;
  /* 限制容器宽度和图片一致，可根据需求设固定值或自适应 */
  width: 800px;
  max-width: 100%;
}

/* 主图片设为块级元素，确保独占一行 */
.main-img {
  display: block;
  width: 100%;
  /* 示例固定高度，可根据你的图片实际高度修改 */
  height: 500px;
  object-fit: cover; /* 可选：保持图片比例，避免拉伸变形 */
}

/* img1盒子样式 */
.img1 {
  width: 100%; /* 和图片宽度严格一致 */
  /* 计算高度：浏览器可视高度减去主图片高度 */
  height: calc(100vh - 500px);
  /* 可选：加边框/背景方便看效果，内部内容排版可按需调整 */
  border: 1px solid #eee;
  background: #f9f9f9;
  padding: 10px;
  box-sizing: border-box; /* 确保内边距不会额外撑开宽度 */
}

关键修改说明 #

1. 包裹容器.image-group：将每组图片和img1绑定成整体，防止img1跑到其他图片区域，同时统一控制宽度，避免排版混乱。
2. 主图片设为display: block：默认图片是行内块元素，会和其他行内元素并排；设为块级后自动独占一行，img1自然会跑到图片正下方。
3. calc()计算高度：100vh是浏览器可视区域的高度，减去主图片的固定高度，就能得到img1需要的高度。如果主图片高度不固定，后续可通过JavaScript动态计算，新手先从固定高度入手更易上手。
4. box-sizing: border-box：确保img1的内边距不会额外撑开宽度，保证和图片宽度完全一致。

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