Html 如何解决幻灯片css问题？

我的Css

我的HTML

#container{
    display:block;
}

#container ul{
    list-style:none;
    position:relative;
    margin:0px;
    padding:0px;
    display:block;
}

#container li{
    list-style:none;
    margin:0px;
    padding:0px;
    position:absolute;
    top:0;
    left:0;
}

#container img{
    margin:0px;
    padding:0px;
}

所有的图片都在彼此下方渲染，这是我想要的，但问题是，如果我在#container之后添加任何div，它将插入到它后面，我想在它后面插入一些div，但每次添加另一个div，它都会在它后面，我如何解决这个问题

---

谢谢

您需要清除并修复在容器之后插入的div：

<div id="container">
<ul>
<li><img src="1.jpg" alt="" /></li>
<li><img src="2.jpg" alt="" /></li>
<li><img src="3.jpg" alt="" /></li>
<li><img src="4.jpg" alt="" /></li>
</ul>
</div>

将#container_li的样式更改为（即删除绝对定位）

也许您还应该将#container ul改为（删除相对定位）

---

-4px

的偏移量适用于IE，而

-5px

适用于Firefox。

您可以通过在

#container ul

上设置高度和宽度来解决此问题。这就是我在制作照片旋转器时所做的，因为图像大小通常是提前知道的。

如果没有浮动，这如何解决OP中的问题？我希望是绝对的，以便使用原始样式彼此渲染的所有图像都放置在彼此的顶部。通过IE8和Firefox3.6测试，添加了负上边距-4px，以便图像正确对齐。

<div id="container">
</div>

<div id="mydiv" class="clearfix">
</div>

.clearfix {
   clear:both;
   display:block;
}

#container li
{
    display: block;
    list-style: none;
    margin: -4px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

#container ul{
    list-style:none;
    margin:0px;
    padding:0px;
    display:block;
}