将文本浮动到 figure 和 figcaption 的右侧答案

【问题标题】：Float text to the right of figure and figcaption将文本浮动到 figure 和 figcaption 的右侧
【发布时间】：2015-04-29 21:03:28
【问题描述】：

我今天发现了“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>

【问题讨论】：

您的问题不清楚，能否提供您想要的链接或示例？
您可能已经发现了这些元素，但显然您没有检查它们的用法和有效性规则：“[a] <figure> 元素；<figcaption> 元素必须是它的第一个或最后一个孩子。" (MDN reference)。

标签： css html image figure caption

【解决方案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 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>

【讨论】：

【解决方案2】：

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

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

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

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

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

figure {
  float: left;
}

【讨论】：

【解决方案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/

【讨论】：