Question

我的Css

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

我的HTML

<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之后添加任何div它将插入它后面，我想在它之后插入一些div但是每次我添加另一个div它落后于它，我该如何解决？

谢谢

Answer 1

您可以通过在#container ul上设置高度和宽度来解决此问题。这就是我制作照片旋转器时所做的，因为图像尺寸通常是提前知道的。

Answer 2

你需要清除你在容器后插入的div：

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

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

和CSS：

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

Answer 3

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

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

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

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

-4px的偏移量适用于IE，-5px适用于Firefox。

如何解决幻灯片css问题？

3 个答案: