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