如何将图像放置在居中图像的右侧

Question

嗨，我正在尝试将图片放在居中的图片旁边

代码看起来像这样：

<div id="body3" >
    <center><img  HEIGHT="700" WIDTH="600" src="Logo.jpg"></center>
    <img height="40" width="220" ;" src="reserver.png" style="float: right;">
</div>

但第二张图片将位于第一张图片的下方，并位于右侧。我希望它位于居中图片的右侧。

有什么选择吗？ 谢谢

Answer 1

尝试这个：

<div id="body3" >
    <center><img  HEIGHT="700" WIDTH="600" style="display: inline-block;" src="Logo.jpg">  <img height="40" width="220" style="display: inline-block;" src="reserver.png">  </center>

</div>

Answer 2

如果我理解您的问题，您希望将次要框对齐在大框之后并向右对齐吗？ 并且不想“扩展”主要的盒子宽度。 如果这是您的问题，这是您的解决方案：

1-将您的＃body3视为包装器，以避免div退出所需位置。

2-将元素与margin: 0 auto;对齐margin: 0 auto; 或text-align:center;

的CSS

 img:nth-of-type(1){
        margin:0 auto;
        background:red;

    }
     img:nth-of-type(2){
        float:right;
    }

    #body3{
       margin:0 auto;
       width:600px;
    }

的HTML

<div id="body3" >

    <img height="700" width="600" src="http://placehold.it/600x700">
     <img height="40" width="220" src="http://placehold.it/220x40">

</div>

https://jsfiddle.net/fvcee05a/1/

Answer 3

您可以使用CSS浮点数。

参见示例https://jsfiddle.net/z3kwx1x5/1/

在https://css-tricks.com/all-about-floats/了解更多

<div id="body3" style="width:1200px;">
    <img style="float:left;margin-left: 220px;" height="700" width="600" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
    <img style="float:left;margin-top:330px;" height="40" width="220" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
</div>

两个图像都向左浮动。 如果要使第一个图像居中，则可以在行内样式属性中添加margin-left 。 左边距的值取决于div＃body3的宽度