如何解決幻燈片的CSS問題？

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

您需要清除在container之后插入的div的fixfix：

<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偏移-4px適用於IE， -5px偏移-4px適用於Firefox。