Css HTML5：如何将两个图像并排放置，然后在下面放置一个figcaption？

我喜欢使用以下干净的标记：

<figure>
    <img src="foo.png" alt=""/>
    <img src="bar.png" alt=""/>
    <figcaption>Lorem ipsum dolor sit amet consectetur adipiscing elit maecenas venenatis lectus nec ligula faucibus tincidunt</figcaption>
</figure>

我在Chrome（macOS）和Safari（iOS）中测试了CSS。它不起作用

我看着他，但没有成功

有什么解决方案可以在大多数平台/浏览器上使用吗

还有一个额外的目标，我不会隐瞒： 当视口的宽度小于并排的两张图片的宽度时，演示应该从并排切换到另一张图片的顶部

但首先：如果有一个主要目标的解决方案，我会很高兴

---

谢谢。对不起，我的英语很差。

这是解决这个问题的方法

你可以用

img { display: inline-table; }

而不是

img { display: table-cell; }

---

这是这个问题的解决方案

你可以用

img { display: inline-table; }

而不是

img { display: table-cell; }

---

尝试查看flexbox。我个人还没有掌握它，但它是一个功能，其目的是帮助使布局在更多平台上工作。尝试用内联表替换表格单元格，它应该可以工作。我在Firefox、Chrome和Safari for mac上试用过，效果不错。@Simrandeep Singh效果不错。甚至在iOS Safari中。谢谢。我将在第一条消息中添加解决方案。因为我无法将您的评论Simrandeep标记为解决方案（只有答案可以用这种方式标记），所以我自己发布了一个答案。在这个论坛上，这是正确的方式吗？我会补充答案。您可以删除您的。尝试查看flexbox。我个人还没有掌握它，但它是一个功能，其目的是帮助使布局在更多平台上工作。尝试用内联表替换表格单元格，它应该可以工作。我在Firefox、Chrome和Safari for mac上试用过，效果不错。@Simrandeep Singh效果不错。甚至在iOS Safari中。谢谢。我将在第一条消息中添加解决方案。因为我无法将您的评论Simrandeep标记为解决方案（只有答案可以用这种方式标记），所以我自己发布了一个答案。在这个论坛上，这是正确的方式吗？我会补充答案。你可以去掉你的。