HTML/CSS问题：图片说明未对齐至图片下方，文本布局异常

问题根源 #

你给<img>和<figcaption>都添加了.pic类并设置float:right，导致两个元素各自独立浮动，脱离了原本的<picture>容器，所以署名会跑到标题上方，而不是跟着图片走。你之前尝试的flex容器没生效，是因为浮动和flex布局在同一个元素上会冲突。

修改后的完整代码 #

HTML 代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
    <link rel='stylesheet' href='test.css'>
  </head>
  <body>
    <!-- 把图片和署名放在同一个容器内，统一控制浮动 -->
    <div class="figure-container">
      <img src='images/str_pic1.JPG' alt="Person in blue shirt" class="pic-img">
      <figcaption class="pic-caption">Photo Credit: Photographer</figcaption>
    </div>
    <div class="text-content">
      <h2>Title</h2>
      <p>Text text text etc. this is the text body. 可以多添加一些测试文本查看环绕效果：Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </body>
</html>

CSS 代码

/* 全局基础排版优化 */
body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #777;
  color: #fff;
}

/* 图片容器：整体浮动到右侧，实现文本环绕 */
.figure-container {
  width: 35%;
  float: right;
  margin-left: 20px;
  margin-bottom: 10px;
}

/* 图片占满容器宽度，去掉行内元素默认间距 */
.pic-img {
  width: 100%;
  display: block;
}

/* 署名居中显示在图片下方，调整字体和间距 */
.pic-caption {
  text-align: center;
  font-size: 0.9em;
  margin-top: 8px;
}

/* 可选：防止文本与浮动元素重叠的排版问题 */
.text-content {
  overflow: hidden;
}

关键修改说明 #

1. 统一浮动容器：将图片和署名放入同一个.figure-container，只给这个容器设置float:right，确保整个图片块（含署名）一起浮动到右侧。
2. 分离元素样式：给图片和署名分别设置类，避免样式冲突，图片占满容器宽度，署名居中对齐。
3. 路径兼容：把Windows路径\改成/，保证在所有操作系统下图片都能正常加载。

额外优化建议 #

如果需要响应式布局，可添加媒体查询，在小屏幕设备上取消浮动，让图片占满整行：

@media (max-width: 768px) {
  .figure-container {
    float: none;
    width: 100%;
    margin-left: 0;
  }
}

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