css - 图形和插图标题右侧的 float 文本

我今天发现了“ figure”和“ figcaption”元素。如何在图片和标题的下一个（右侧）换行。

<div>
<img alt="Hannibal Regional Medical Building" src="https://hannibalregionalmedicalgroup.org/Portals/0/locations/hannibal_regional_medical_building_375.jpg" width="375" height="178" style="text-align: left;" />
<figcaption>Hannibal Regional Medical Building</figcaption>
</div>
<div>
 <p>
 <span>Hannibal Regional Medical Group
 <br />
 6500 Hospital Drive<br />
 Hannibal, MO  63401
 </span>
 </p>
</div>
<div>
<p><span>To make an appointment,<br />
please call 573-629-3500
</span>
</p>
</div>

最佳答案

HTML <figcaption>元素表示标题或图例
  与其余部分描述的图形或插图相关联
  <figure>元素的数据，该元素是其直接祖先。

  允许的父母：<figure>元素； <figcaption>元素
  必须是它的第一个或最后一个孩子。 -MDN

这意味着在您的示例中，将<div>标记用作<figcaption>的直接祖先是无效的HTML。要解决此问题，您需要将<div>替换为<figure>。

<figure>
  <img src="" alt="">
  <figcaption>...</figcaption>
</figure>

为了使其余文本显示在右侧，有很多选项，例如使用float是最常见的方法。

figure {
  float: left;
}

关于css - 图形和插图标题右侧的 float 文本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29954506/

Figure

css - 图形和插图标题右侧的 float 文本