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

大男孩1337

这是我当前的代码:

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

不幸的是,也许是因为图像太宽,它仍将第二个图像放在下一行。我想避免这种情况-不管事情变得多么广泛。我怎样才能做到这一点?

内拉吉·拉娜(Neeraj Rana)

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章