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

我不需要图像向左浮动。 演示

绿色背景的 div 应该在下面。这个演示在 chrome 中工作正是我想要的，但不是在 Mozilla Firefox 中。

Answer 1

您对“img”元素的样式似乎包含一些错字（floa/t: left;）

Answer 2

添加clear:both

#other{width: 100px; height: 100px; background-color: green; position: relative; clear:both}

演示

Answer 3

只需添加display:inline-block到img.

http://jsfiddle.net/XPUVC/8/

Answer 4

这实际上是可能的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;
}

火狐

它们只是忽略widthand height，因此您需要将显示更改为块级元素，然后它们将被应用。

设置 DOCTYPE 时无法将宽度/高度设置为 img (Firefox)

演示

编辑：绝对定位的 div

演示

Answer 5

演示链接。

img{float: left; background-color: #0D2DB4; width: 100px; height: 100px;}
#someid{position: relative;overflow: hidden;}

Answer 6

干得好。

工作解决方案

的HTML：

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

CSS：

#someid{position: relative;height:100px;}
.someclass{position: absolute;top:100px; left: 100px; 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;}

我希望这就是你要找的。