将文本浮动到图形和无花果标题的右侧

Question

我今天发现了"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 Hos​pital Drive<br />
 Hannibal, MO  63401
 </span>
 </p>
</div>
<div>
<p><span>To make an appointment,<br />
please call 573-629-3500
</span>
</p>
</div>

Answer 1

将第一个div替换为 figure（只有这是有效的），然后将float:left;放在figure上：

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

Answer 2

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

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

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

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

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

figure {
  float: left;
}

Answer 3

<figure style="float:left;">
<img alt="Hannibal Regional Medical Building" src="https://hannibalregionalmedicalgroup.org/Portals/0/locations/hannibal_regional_medical_building_375.jpg" width="375" height="178" />
<figcaption>Hannibal Regional Medical Building</figcaption>
</figure>

---

演示：

http://jsfiddle.net/tuga/6va2nqad/3/