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

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>