0

我完全无法清楚地描述我的问题，所以我试图在这里尽可能简单地制作一个 jsfiddle：http: //jsfiddle.net/Emf2f/。在 Chrome+IE 上，我的图像在 #div3 下，而在 Firefox 上，我的图像在 #div3 旁边。为什么会这样？哪个结果更“标准”？

<div id="div1">
    <div id="div2">
        <div id="div3"> Text </div>
    </div>
    <img src="http://img805.imageshack.us/img805/758/txgo.jpg" />
</div>

#div1{
    width:500px;
    overflow:auto;
    border:1px solid red;
}
#div2{
    margin-bottom:-1px;
}
#div3{
    background:cyan;
    float:left;
    width:200px;
    height:100px;
}
4

2 回答 2

1

我会在您不希望图像与内联显示的对象周围使用“清除”。您可以在此处阅读有关定位的更多信息：http ://w3schools.com/css/css_float.asp

该站点具有您要完成的确切示例。

我将您的图像添加到 div 标签 (div4) 然后将 clear:both 放在该 div 的 css 文件中，它在 Chrome、IE 和 FF 中正常工作。

div4{清除：两者；}

让我知道这是否有帮助。谢谢。

于 2013-06-28T14:29:57.740 回答
0

从内容的角度来看，他们都在做同样的事情来显示img内联（根据 HTML 规范），不同的是默认的溢出行为。在 Chrome 和 IE 中，它们按文本包装（这实际上是我想象的正确行为），而 Firefox 则不是。如果您希望图像始终显示在下方，请将其标记为display:block;

于 2013-06-28T14:19:39.277 回答