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应该低于。这个演示正是我想要的，但在Mozilla Firefox中没有。

Answer 1

添加clear:both

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

<强> DEMO

Answer 2

'img'元素的样式似乎包含一些拼写错误（floa / t：left;）

Answer 3

你走了。

<强> WORKING SOLUTION

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

我希望这就是你要找的东西。

Answer 4

只需将display:inline-block添加到img。

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

Answer 5

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

for firefox

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

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

DEMO

编辑：绝对定位div

DEMO

Answer 6

Demo link

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

定位图像最接近绝对定位div

6 个答案: