如何在HTML中实现图片右侧下方添加文本？

我是HTML新手，希望文本位于图片的右侧下方。我尝试使用float: right;样式，但文本却显示在图片的右侧旁边。

预期效果示例图：

我尝试的代码片段：

.image-container {
    position: absolute;
    text-align: right;
}

.image {
    max-width: 100%;
    height: auto;
    margin-left: 10px;
    float: right;
}

.text {
    text-align: right;
    margin-top: 10px;
}

<div id="image-container">
    <img src="Safwon.png" alt="Picture of the author" width="150" height="200" class="image" />
    <div class="text">This is me</div>
</div>

你遇到的核心问题是：float: right会让文本环绕浮动元素，所以文本才会出现在图片的右侧旁边，而不是正下方。同时原代码里的position: absolute会脱离正常文档流，也容易导致布局混乱。下面提供几种简单直观的实现方式：

方法1：使用Flexbox（推荐） #

Flexbox是现代布局方案，代码简洁且易维护，能轻松实现垂直排列+右对齐的效果：

.image-container {
  display: flex;
  flex-direction: column; /* 子元素垂直排列 */
  align-items: flex-end; /* 让图片和文本都靠右对齐 */
  gap: 10px; /* 图片与文本的间距 */
}

.image {
  max-width: 150px;
  height: auto;
}

.text {
  text-align: right;
}

<div class="image-container">
  <img src="Safwon.png" alt="作者照片" class="image" />
  <div class="text">This is me</div>
</div>

方法2：基础块级元素布局 #

如果不想用Flexbox，也可以通过设置文本对齐和图片块级属性实现：

.image-container {
  text-align: right; /* 容器内元素默认右对齐 */
}

.image {
  max-width: 150px;
  height: auto;
  display: block; /* 让图片独占一行，避免和文本同行 */
  margin-left: auto; /* 确保图片靠右 */
  margin-bottom: 10px; /* 图片与文本的间距 */
}

.text {
  text-align: right;
}

方法3：修复原有浮动方案（不推荐） #

如果一定要保留float，需要给文本添加clear: right来清除浮动，让文本跑到图片下方，同时取消容器的绝对定位避免布局异常：

.image-container {
  text-align: right;
}

.image {
  max-width: 150px;
  height: auto;
  float: right;
}

.text {
  clear: right; /* 清除右侧浮动，强制文本换行到图片下方 */
  text-align: right;
  margin-top: 10px;
}

内容的提问来源于stack exchange，提问作者Safwon Bin Faisal