CSS: Div Boxes перекрывают друг друга и скрывают текст.Как «очистить» их?
Вопрос
У меня есть небольшая проблема с моими ящиками div, которые я не могу решить.
Я динамически создаю эти поля div:
<div id="pagelist">
<div class="pagelist_img"><img src="images/default.gif"></div>
<div class="pagelist_h1">HEADLINE</a></div>
div class="pagelist_excerpt">SUMMARY</div>
</div>
.
Каждый ящик div состоит как показано на рисунке сверху, затем заголовок и краткое резюме поста.Теперь, моя проблема в том, что ящики перекрываются друг на друга, но достаточно, чтобы суммарную часть скрыта под изображением поля DIV ниже.
Хорошо, это может быть немного запутанно, но точка строки - это то, что как-то коробки не разделены, но перекрываются друг с другом.
Мои CSS для Box PageList Div:
#pagelist{
float: left;
width: 280px;
margin: 0 40px 20px 0;
position: relative;
height: 100px;
}
.pagelist_h1 {
font-size: 1.8em;
font-weight: bold;
}
.pagelist_img{
clear:both;
top: 0px;
position: relative;
}
.pagelist_excerpt, .pagelist_excerpt p {
font-size: 1em;
color: #000000;
clear:both;
}
.
Я надеюсь, что у некоторых есть решение или может указать мне в правильном направлении, потому что я некоторое время пробовал, чтобы решить это сам, без удачи.Я хотя это было просто вопрос использования
искренняя
- Местика
Решение
Use a clearfix. Something along the lines of:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
zoom: 1; /* triggers hasLayout */
}
And modify your markup to be
<div id="pagelist" class="clearfix">
http://www.positioniseverything.net/easyclearing.html
Also, see the dupes:
Другие советы
Try removing the positioning and clears, as default <div>
s are block level and should display one under the other.