Как решить проблему слайд-шоу CSS?

Question

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

my 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>

все изображения, отображаемые друг под другом, это то, что я хочу, но проблема в том, что, если я добавлю любой div после #containerон будет вставлен за ним, я хочу вставить несколько div'ов после него, но каждый раз, когда я добавляю еще один div, он идет за ним, как я могу решить это?

Спасибо

Answer 1

Вы можете исправить это, установив высоту и ширину на #container ul. Именно это я и сделал, когда делал фото-ротатор, поскольку размеры изображений обычно известны заранее.

Answer 2

Изменить стиль для #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.

Answer 3

вам нужно очистить div, который вы вставляете после контейнера:

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

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

и CSS:

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