不使用display属性，如何实现盒子内图片下方显示文本？

以下是几种无需修改display属性即可实现文本在图片正下方的方法：

方法1：利用图片的自然换行特性 #

默认情况下，<img>是行内块元素，当它的宽度占满容器时，后续文本会自动换行到图片下方。只需确保图片宽度足够填满容器，文本就会自然处于正下方：

.box {
  width: 300px; /* 可根据需求设置容器宽度 */
}
.box img {
  width: 100%; /* 让图片占满容器宽度，触发换行 */
}
.box p {
  text-align: center; /* 可选，让文本与图片居中对齐 */
}

这种方法最简洁，无需额外布局属性，适合大多数场景。

方法2：使用margin控制文本位置 #

如果图片是固定尺寸，可以通过给文本设置margin-top来精准定位到图片下方。注意要去掉文本默认的margin，避免间距混乱：

.box img {
  height: 200px; /* 固定图片高度 */
  width: 300px;
}
.box p {
  margin-top: 0; /* 清除默认上外边距 */
  text-align: center;
}

缺点是图片尺寸变化时，需要手动调整margin值，灵活性较差。

方法3：利用定位属性 #

将容器设为相对定位，文本设为绝对定位，通过top属性将文本定位到图片下方：

.box {
  position: relative;
  width: 300px;
  min-height: 240px; /* 确保容器能容纳图片和文本 */
}
.box img {
  width: 100%;
}
.box p {
  position: absolute;
  top: 100%; /* 从容器顶部100%位置开始，即图片下方 */
  left: 0;
  width: 100%;
  text-align: center;
}

这种方法灵活性高，适合需要精确控制位置的场景，但要注意给容器设置足够的最小高度，避免文本溢出容器。

你之前尝试的grid-template-rows无效，大概率是因为没有给容器设置display: grid，但由于你不想使用display属性，所以这种方案不在考虑范围内。

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