漂浮在數字和圖的右側的文字

Question

今天我發現了「數字」和「無花果」元素。如何將文本下一個（右側）包裝到圖像和標題。

<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

的HTML <figcaption>元素表示一個標題或與一個數字或由<figure>元件這是其直接祖先的 的數據的其餘部分中描述的圖相關聯的圖例 。

允許的父母： A <figure>元素; <figcaption>元素 必須是其第一個或最後一個孩子。 - MDN

這意味着使用<div>變量作爲<figcaption>直接祖先是你的榜樣無效的HTML。要解決您需要用<figure>替換<div>。

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