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 - 扩展表条目以显示多个单独的注释。鼠标悬停导致覆盖div在评论上淡入，并指示评论的日期和作者。只需切换打开顶部表行并鼠标悬停评论，看看我在说什么（当然不在IE中工作）。现在评论框是一个设定的高度，但这不是一个理想的解决方案。你可以看到最长的评论已经过了一点。

你们有什么想法？

Answer 1

提供绝对位置会使评论者超出文档的正常流程。因此，commentdiv假装它不存在，所以文本“溢出”包含commentdiv。

绝对

具有position：absolute的元素从页面的正常流中取出，并定位在相对于其包含块的所需坐标处。

由于绝对定位的元素被从正常流中取出，正常的文档流表现就好像元素不在那里：它关闭了它将占用的空间。

参考：http://www.quirksmode.org/css/position.html

编辑：

我不确定你想要达到的重叠程度，但是这个CSS会对评论者进行评论。我删除了不透明度：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;
}

Div内容溢出问题

1 个答案: