Div内容溢出问题

Question

我已经阅读了数十篇关于此主题的文章，但其他人都遇到了水平溢出问题，而我的问题是垂直的，像浮动，清除和溢出参数设置等解决方案似乎不起作用。下面是代码：

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中工作）。现在评论框是一个高度，但这不是一个理想的解决方案。你可以看到最长的评论已经溢出了一点。

你们认为什么？

Answer 1

提供绝对位置是将注释占有者带出文档的正常流程。因此，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; 
}