下面的标记使用 figure 元素显示与段落文本内联的图像——因此该图被“包含”在第一个<p>.
<div class="object-content">
<p>
<figure class="object-inline-figure">
<img
class="object-inline-figure-image"
height="200"
src="/site_media/media/files/images/WH-487_opt.jpeg"
width="300">
<figcaption class="object-inline-figcaption">
<p class="object-inline-figcaption-caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="credits">
<span>Credit: </span>
<span class="object-inline-figcaption-caption-user-credit">
<a href="/profiles/Grey-Smith-Leigh/">Leigh Grey-Smith</a></span>,
<span class="object-inline-figcaption-caption-custom-credit">Lady Grey</span>
</p>
</figcaption>
</figure>
The relationships between functional drivers and symbolic power,
landscape and architecture, site and context, quality of materials
and quality of experience are all well considered. This high quality
design resolution can, in part, be attributed to the relationship
between designer and client.</p>
</div>
然而，这似乎至少在 Chrome 和 Firefox 中是有问题的，也就是说，当使用“检查元素”（在 Chrome 中）时，<figure>和<p>文本/标记被报告为：
<p></p>
<figure>
#...
</figure>
The relationships between functional drivers and symbolic power,
landscape and architecture, site and context, quality of materials
and quality of experience are all well considered. This high quality
design resolution can, in part, be attributed to the relationship
between designer and client.
<p></p>
这有效地“孤立”了文本“......之间的关系”在其<p>标记之外，失去了它的样式和语义意义......至少对于网站页面的人类查看者来说。
移动<figure>外部<p>似乎有更可预测的结果，即：
<figure>
#...
</figure>
<p>The relationships between functional drivers and symbolic power,
landscape and architecture, site and context, quality of materials
and quality of experience are all well considered. This high quality
design resolution can, in part, be attributed to the relationship
between designer and client.
</p>
但是当向左或向右编辑<figure>时，我们有点失去了'textwrap'效果。text-align
- 这是正确使用
<figure>（前一个例子）吗？ - 是浏览器的问题吗？（Safari/Firefox 和 Chrome 都会产生稍微不同的、意想不到的解释）？
- 正确的标记应该是什么？