У меня есть следующий div, который ошибочно делает:
HTML - это следующий:
<div class="content-wrapper">
<img src="res/img/Logo.png" id="logo" />
just regular content
<ul class="mini-gallery">
<a href="#"><li><img src="res/img/gallery/bucuresti/17.jpg"></li></a>
<a href="#"><li><img src="res/img/gallery/bucuresti/10.jpg"></li></a>
<a href="#"><li><img src="res/img/gallery/bucuresti/3.jpg"></li></a>
</ul>
</div>
CSS:
.content-wrapper {
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.8);
text-align: left;
background-color: #E6B5E9;
width: 960px;
margin-left: auto;
margin-right: auto;
padding-left: 10px;
padding-right: 10px;
min-height: 100%;
}
ul.mini-gallery {
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
margin-top: 10px;
padding: 0;
list-style: none;
}
ul.mini-gallery li
{
list-syle: none;
}
ul.mini-gallery img
{
width: 310px;
height: auto;
margin-right:10px;
padding: 0;
float:left;
border: none;
}
Как вы могли понять, изображения должны быть в div, а не вне его. Так почему это происходит и как я могу его решить?
Как было предложено выше, это будет делать overflow:auto
или clearfix (что я сделал ниже). Я также скорректировал ваш HTML, чтобы ваши якоря были дочерними элементами ваших элементов списка, а не наоборот:
<div class="content-wrapper">
<img src="res/img/Logo.png" id="logo" />
just regular content
<ul class="mini-gallery">
<li><a href="#"><img src="res/img/gallery/bucuresti/17.jpg" /></a></li>
<li><a href="#"><img src="res/img/gallery/bucuresti/10.jpg" /></a></li>
<li><a href="#"><img src="res/img/gallery/bucuresti/3.jpg" /></a></li>
</ul>
<div style="clear:both"></div>
</div>
Здесь скрипка: http://jsfiddle.net/2uMDK/
Проблема заключается в плавающих элементах без их очистки. Вы можете использовать clearfix или просто установить overflow: hidden
on .content-wrapper
Потому что вы плаваете изображения. Чтобы разрешить контейнеру .content-wrapper
div снова содержать их, добавьте overflow:auto;
к нему.
.content-wrapper {
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.8);
text-align: left;
background-color: #E6B5E9;
width: 960px;
margin-left: auto;
margin-right: auto;
padding-left: 10px;
padding-right: 10px;
min-height: 100%;
overflow:auto;
}
ul
илиli
элементах, а не в обертке. Я думаю, что вы перемещаете некоторые элементы, и они отображаются внеdiv
, даже если они внутри. В этом случае вы можете заменить свойствоfloat
наdisplay:inline-block
. Пример: jsfiddle.net/tHp4j