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

嗨，我想把一张图片放在中间的旁边

代码如下所示：

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

但是第二张图片会在第一张图片的下方，右边，我希望它在中间那张图片的右边

有选择吗？谢谢

试试这个：

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

试试这个：

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

---

您可以使用css浮动

请参见第页的示例

了解更多信息，请访问

---

两个图像都向左浮动。如果要将第一幅图像居中，可以将

左侧边距

添加到“内联样式”属性中。左边距的值取决于div#body3的宽度。您可以使用css浮动

请参见第页的示例

了解更多信息，请访问

---

两个图像都向左浮动。如果要将第一幅图像居中，可以将

左侧边距

添加到“内联样式”属性中。左边边距的值取决于div#body的宽度3

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

1-将你的#身体3当作一个包装，以避免你的div离开理想的位置

2-将元素与

边距对齐：0自动或
文本对齐：居中

CSS

HTML



如果我理解了你的问题，你想让小方框在大方框之后对齐并向右对齐吗？并且不想“扩展”主框的宽度。如果这是您的问题，以下是您的解决方案：

1-将你的#身体3当作一个包装，以避免你的div离开理想的位置

2-将元素与
边距对齐：0自动或
文本对齐：居中

CSS

HTML



Downvote不是我说的，但你似乎是为了花车才使用花车。将第一张图像浮动到左侧需要OP做额外的工作，以便将图像恢复到中心位置，而他/她已经做到了这一点。基本上是后退一步，然后前进两步。你的策略有优点，但OP没有要求新策略，他问如何将第二个图像放置在第一个图像的右侧，第一个图像已经居中。明白了。不过，我并不真正支持使用不推荐使用的标记。我想你总是可以使用桌子或绝对定位，但那太恶心了。我真的不想使用绝对定位，但我实在想不出这个…我想你有3个选择：1。使用div和floats 2。使用表3。使用绝对位置DownVote不是我的建议，但看起来你使用浮动是为了浮动。将第一张图像浮动到左侧需要OP做额外的工作，以便将图像恢复到中心位置，而他/她已经做到了这一点。基本上是后退一步，然后前进两步。你的策略有优点，但OP没有要求新策略，他问如何将第二个图像放置在第一个图像的右侧，第一个图像已经居中。明白了。不过，我并不真正支持使用不推荐使用的标记。我想你总是可以使用桌子或绝对定位，但那太恶心了。我真的不想使用绝对定位，但我实在想不出这个…我想你有3个选择：1。使用div和floats 2。使用表3。使用绝对位置，所以我尝试了你的选择，但它不起作用。除了我在中使用的css之外，我仅有的css是我的css表中的背景色。我编辑了我的答案。将两幅图像都放在中间标记内。好的，这样可以解决这个问题，但这意味着原来居中的图像离中心有一点偏左……您可以在第一幅图像上添加一个左边距，或者向下查看derekcbaldwin的答案。无论哪种方式，你都会增加一个左边距，但德里克鲍德温的答案更符合行业最佳实践，中间的标签会赢！所以我尝试了你的选择，但没有成功。除了我在中使用的css之外，我仅有的css是我的css表中的背景色。我编辑了我的答案。将两幅图像都放在中间标记内。好的，这样可以解决这个问题，但这意味着原来居中的图像离中心有一点偏左……您可以在第一幅图像上添加一个左边距，或者向下查看derekcbaldwin的答案。无论哪种方式，你都会增加一个左边距，但德里克鲍德温的答案更符合行业最佳实践，中间的标签会赢！
 img:nth-of-type(1){
        margin:0 auto;
        background:red;

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

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

<div id="body3" >

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

</div>