html - 定位最接近绝对定位 div 的图像

Question

我有以下html

<div id="someid">
    <img src="" />
    <div class="someclass"></div>
</div>
<div id="other">
</div>

和下面的CSS

#someid{position: relative;}
.someclass{position: absolute; left: 100px; width: 100px; height: 100px; background-color: red;}
img{floa/t: left; background-color: blue; width: 100px; height: 100px;}
#other{width: 100px; height: 100px; background-color: green; position: relative;}

我不需要图像向左浮动。 Demo

绿色背景的 div 应该在下面。这个演示在 chrome 中完全符合我的要求，但在 Mozilla Firefox 中却不行。

Answer 1

这在没有 float:left; 的情况下实际上是可能的，但我不确定您是否真的需要一个绝对定位的 div。

注意:没有绝对div

#someid {
    position: relative;
}
.someclass {
    position: relative;
    display:inline-block;
    width: 100px;
    height: 100px;
    background-color: red;
}
img {
    /*float: left;*/
    display:inline-block;
    background-color: blue;
    width: 100px;
    height: 100px;
}
#other {
    width: 100px;
    height: 100px;
    background-color: green;
    position: relative;
}

火狐浏览器

它们只是忽略宽度和高度，因此您需要将显示更改为 block 级元素，然后它们才会被应用。

Unable to set width/height to an img when DOCTYPE is set (Firefox)

DEMO

编辑:使用绝对定位的 div

DEMO