如何在 html 中并排放置 2 个图像？

Question

这是我当前的代码：

<figure class="half">
    <img style="width:400px" src="http://alexmarshall12.github.io/assets/img/colored_1693146.png">
    <img style="width:600px" src="http://alexmarshall12.github.io/assets/img/one-piece-1693146_colored2.png">
    <figcaption>Caption describing these two images.</figcaption>
</figure>

不幸的是，也许因为图像太宽，它仍然将第二张图像放在下一行。我想避免这种情况——无论事情变得多么广泛。我怎样才能做到这一点？

Answer 1

只需将 css 添加display:flex到案例图中图像的父容器即可。

<figure class="half" style="display:flex">
    <img style="width:400px" src="http://alexmarshall12.github.io/assets/img/colored_1693146.png">
    <img style="width:600px" src="http://alexmarshall12.github.io/assets/img/one-piece-1693146_colored2.png">
    <figcaption>Caption describing these two images.</figcaption>
</figure>