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

如果我理解你的问题，你想让小盒子在大盒子之后和右边对齐吗？并且不想＆＃34;扩展＆＃34;主要的箱子宽度。如果这是您的问题，那么这是您的解决方案：

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

2-将您的元素与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添加到内联样式属性。 margin-left的值取决于div＃body3

的宽度

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

3 个答案: