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

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 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>

Answer 1

The HTML <figcaption> element represents a caption or a legend associated with a figure or an illustration described by the rest of the data of the <figure> element which is its immediate ancestor.

Permitted parents: A <figure> element; the <figcaption> element must be its first or last child. -MDN

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

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

而要让剩余的文字显示在右手边，有很多选择，比如使用float是最常见的方式。

figure {
  float: left;
}

Answer 2

<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/

Answer 3

把第一个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 Hospital Drive<br/>
    Hannibal, MO  63401</span>
  </p>
</div>
<div>
  <p>
    <span>To make an appointment,<br/>
    please call 573-XXX-XXXX</span>
  </p>
</div>

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

Float text to the right of figure and figcaption

html

css

image

caption

figure