Question

请告诉我为什么通过img标签添加图片更改父容器的位置。

<div id="dives" class="rex">
    <span class="ex"><img class="img1" src="logo.png"></span><span class="ex2"></span><span class="ex3"></span>
</div>

Demo

但是当我添加＆＃34; display：block＆＃34; （感谢 Dark Ashelin ）它再次发挥作用。

img.img1{
padding:0;
margin:0px auto;
display: block;
}

Demo

有谁知道为什么会发生这种情况以及为什么要添加＆＃34; display：block＆＃34;纠正了吗？

Answer 1

好吧，如果父项省略了position属性，那么子项将相对于包含相对或绝对位置的下一个包含div的位置。如果没有包含元素的页面上设置了这些位置属性，则子项将相对于页面主体

定位

Answer 2

设置图像位置

img.img1{
padding:0;
margin:0px auto;
position: absolute;
vertical-align: middle;
}

以下是fiddle

Answer 3

1.首先，请务必关闭img标签

2.style =“width：200px; height：100px; border：1px solid blue;”

把它放在你的span和div中的代码中，你会发现问题。这个问题发生了，因为你知道了重叠，所以你可以通过边界的大小来解决这个问题。

这段代码是正确的只是添加浮动属性实际上什么是happing是当你在span中放置另一个元素时它将它放在它旁边float它将它放在prev元素上。

<div id="dives" class="rex" style="border:solid red">
    <span class="ex"><img class="img1" src="logo.png" style="float:left"/></span><span class="ex2"></span><span class="ex3"></span>
</div>

Answer 4

因为span是标准的内联元素（display：inline）。显示图像：内联块。在内联元素中，只允许放入其他内联元素，没有别的！因此，如果您在span标记上创建display: block;，它将成为块元素。在内部块元素（div是块）中，您可以放置任何其他类型的元素。

我宁愿使用div而不是span来代替使用带display: block;的CSS。

为什么添加图像会更改父<div>或<span>？</span> </div>的位置

4 个答案: