0

我正在开发一个简单的 CSS 和 HTML 网站，正在尝试一些东西。

我想让图像漂浮在 div 上。像这样：

    <div id="big_container">
        <img id="img1" src="images/fun.png"/>
        <div id="some_container"></div>
    </div>

这是它的CSS：

#big_container{ width: 960px; height: 270px; margin-left: auto; margin-right: auto; margin-top: 42px;}

#some_container{ width: 100%; height: 198px; border: 1px solid #cccccc;}

#img1{ width: 69px; height: 200px; float: left; position: relative; left: 200px;}

这样做的目的不是将divimg放在some_containerdiv 上，而是将其放在第一个位置，然后在图像之后，在其下方放置some_containerdiv。

我怎样才能让图像漂浮在 div 上？Firefox 和 Chrome 可以正确显示。IE8 没有。

编辑

根据 Kyle Sevenoaks 的说法，我尝试删除relativeand 。left但它仍然显示在 div 上方，并且不重叠。

4

2 回答 2

2

您可以使用位置：绝对；使其显示在您需要的 div 上：

#img1{ width: 69px; height: 200px; position: absolute; left: 200px;}​

http://jsfiddle.net/Kyle_Sevenoaks/dLnm7/

编辑

我忘了提到你应该添加position: relative;到父 div 中。

http://jsfiddle.net/Kyle_Sevenoaks/dLnm7/1/

于 2012-08-24T11:51:08.253 回答
1

浮动元素不会将其置于同一父级中其他元素的顶部。您还尝试在相对定位的元素上使用“左”CSS 值。“float”适用于相对定位的元素，“left”适用于绝对和固定定位的元素。

这是您将“img1”定位在“some_container”顶部的CSS（包括边距声明的简写）。注意“位置：相对；” 应用于父“big_container”。

#big_container{ width: 960px; height: 270px; margin: 42px auto 0; position:relative;}
#some_container{ width: 100%; height: 198px; border: 1px solid #CCC;}
#img1{ width: 69px; height: 200px; position: absolute; left: 200px; top:0px; }

您现在将看到 IE8 在这里没有错。其他浏览器可能对您很好，并忽略了任何冲突的 CSS 声明，从而为您提供所需的结果。IE8 不那么复杂，可能并没有从字面上补偿和采用您的 CSS。

于 2012-08-24T11:56:48.430 回答