Question

我的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框的图像下面。

好吧，这可能有点令人困惑但是线条的重点是，盒子不是分开但彼此重叠。

我的页面列表div框的CSS是：

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

我希望有些人有一个解决方案，或者可以指出我正确的方向，因为我已经尝试了一段时间自己解决它，没有任何运气。我虽然只是使用 clear：both 标签，但它没有做任何事情。

施
- 梅斯蒂卡

Answer 1

尝试删除定位并清除，因为默认<div>是块级别，应该在另一个下面显示一个。

Made an example with your code

Answer 2

使用clearfix。有点像：

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    zoom: 1;     /* triggers hasLayout */
}

将您的标记修改为

<div id="pagelist" class="clearfix">

http://www.positioniseverything.net/easyclearing.html

另外，请参阅欺骗：

CSS：Div框彼此重叠并隐藏文本。如何“清除”它们？

2 个答案: