题
我有一个小问题,我的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框的图像下方。 好吧,它可能有点令人困惑,但线的点是,即某种方式盒子没有分开,但彼此重叠。
pagelist div box的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;
}
.
我希望有些人有一个解决方案或者可以指向正确的方向,因为我现在尝试了一些时间来解决它,没有任何运气。我虽然这只是一个使用清晰的问题:两个标签,但它没有做任何事情。
真诚的 - mestika
解决方案
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.
不隶属于 StackOverflow