Div内容溢出问题
我已经阅读了数十篇关于此主题的文章,但其他人都遇到了水平溢出问题,而我的问题是垂直的,像浮动,清除和溢出参数设置等解决方案似乎不起作用。下面是代码:Div内容溢出问题
HTML:
<div style="padding:25px">
<? $pieces = explode("|",$row['comments']); foreach ($pieces as $comment) { $comment = explode("~",$comment); ?>
<div class="commentdiv" style="padding:10px;border-radius: 5px; position:relative; float:left; width:100%; margin-bottom:25px; background-color:#FFF;">
<div class="commentcover" style="clear:both">Written by <i><? echo $comment[1]; ?></i> on <b><? echo $comment[2]; ?></b></div>
<div class="commentholder" style="clear:both"><? echo $comment[0]; ?></div>
<div style="clear:both"></div>
</div>
<? } ?>
</div>
CSS:
.commentcover {
position: absolute;
top: 0;
left: 5%;
width: 90%;
height: 90%;
z-index: 500;
padding:10px;
background-color: #fff;
opacity: 0;
filter:progid:DXImageTransform.Microsoft.BasicImage(opacity=0);
border-radius: 5px;
text-align:center
}
.commentholder {
position:absolute; top:10px; left:5%; z-index:400; width:90%;
}
我一直在玩这个很长一段时间没有太多的成功..我不想来拍滚动条:/
Here is a link to what I'm working on - 表格条目被展开以显示多个单独的评论。鼠标悬停会导致注释覆盖注释并显示注释的日期和作者。只需打开顶部表格行并将鼠标悬停在评论上即可查看我在说什么(当然不是在IE中工作)。现在评论框是一个高度,但这不是一个理想的解决方案。你可以看到最长的评论已经溢出了一点。
你们认为什么?
提供绝对位置是将注释占有者带出文档的正常流程。因此,commentdiv假装它不在那里,所以文本“溢出”了包含commentdiv。
绝对
与位置的元素:绝对取出的页面的正常流动,并且定位在期望相对其包含块的坐标。
由于绝对定位的元素被从正常流程中取出,正常的文档流程就像该元素不在那里一样:它关闭了需要的空间。
参考:http://www.quirksmode.org/css/position.html
编辑:
我不完全相信你的重叠正在努力实现的,但这个CSS将设置commentcover超过commentholder。我已经移除了不透明度:0以显示它的外观。我尽可能地将其他样式尽可能地放在原始位置。
.commentdiv {
padding:10px;
border-radius: 5px;
float:left; /* because the children are floated, floating the parent so height changes */
width:100%;
margin-bottom:25px;
background-color:#FFF;
}
.commentcover {
position:relative; /* so z-index still works */
width: 90%;
margin:0 auto;
z-index: 500;
padding:10px;
background-color: #fff;
border-radius: 5px;
text-align:center;
}
.commentholder {
position:relative; /* so z-index works */
float:left;
z-index:400;
width:90%;
margin-top:-2em;
}
感谢您的答案Bstakes,我怀疑这可能是这种情况。现在,有没有一种方法可以在没有绝对定位的情况下重叠这些div,或者停止绝对定位使div的内容溢出? – sdo
将CSS添加到原始答案中。我相信这是你试图达到的效果。虽然基于图片,但我对布局的元素有点模糊,你认为它们在工作而不是在工作。我希望这有帮助。 – bstakes
这里是一个[链接,让你更好地了解发生了什么](http://www.kiddyjunction.ca/admin/enrollment.php)。点击+切换打开顶部条目,然后将鼠标悬停在评论上。难以置信的丑陋造型 - 仍然在玩。另外,我怀疑现在只适用于FF 7+。我尝试了你的造型,但是后来我发现commentcover不再适合评论者,只有当你看到我在说什么时,才会淡出更大的兄弟div的一行部分。 – sdo
链接不工作 –
@Milan Jaric:我修好了。 – thirtydot
你需要位置:绝对所有divs? –