如何將圖像放置在居中圖像的右側

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的寬度