如何在图片底部右侧放置图标？使用display属性仍无法解决错位问题

需求：在图片底部位置放置图标，使其与图片横向并排，但图标始终显示在图片下方，尝试display属性无效。

方案1：Flex布局（推荐，简单直观） #

将图片和图标放入同一个容器，通过Flex布局实现底部对齐并排：

<div class="image-group">
  <img src="你的图片路径" alt="图片内容">
  <img src="你的图标路径" alt="图标内容" class="inline-icon">
</div>

.image-group {
  display: flex;
  align-items: flex-end; /* 让子元素沿底部对齐 */
  gap: 10px; /* 可选：设置图片与图标间的间距 */
}
.inline-icon {
  width: 40px; /* 根据需求调整图标尺寸 */
  height: 40px;
}

方案2：绝对定位（适合精准控制位置） #

通过相对+绝对定位，把图标固定在图片底部的横向位置：

<div class="image-wrapper">
  <img src="你的图片路径" alt="图片内容">
  <img src="你的图标路径" alt="图标内容" class="positioned-icon">
</div>

.image-wrapper {
  position: relative;
  display: inline-block; /* 容器宽度适配图片 */
}
.positioned-icon {
  position: absolute;
  bottom: 0;
  left: 100%; /* 图标定位在图片右侧 */
  margin-left: 10px; /* 可选：设置与图片的间距 */
  width: 40px;
  height: 40px;
}

注意：如果之前给图片设置了display: block，需要移除该属性，或者给容器设置合适的宽度，避免块级元素独占一行导致图标换行。

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