爲什麼我的內容在div外顯示？

Question

我有一個內容「泡泡」，它工作正常。現在，我想顯示一個應該總是在該div右下角的計數（2行），INSIDE它。我嘗試了很多東西，但由於某種原因，它總是與外部的div和節目重疊。我究竟做錯了什麼？

<style type="text/css"> 
body{ 
background-color:#f3f3f3; 
} 
.commentbox{ 
background-color: #ffffff; 
width: 200px; 
border-color: #D1D1D1; 
border-radius: 4px; 
border-style: solid; 
border-width: 1px; 
padding-bottom: 9px; 
padding-left: 9px; 
padding-right: 9px; 
padding-top: 9px; 
position:relative; 
} 
.count{ 
float:right; 
text-align:right; 
} 
</style> 

<div class="commentbox"> 
<div class="title">Some several lines long long long long content text goes here 
</div> 
<div class="count">123<br>456</div> 
</div> 

Answer 1

你漂浮.count所以它不影響它的父容器的高度。

在父母上設置overflow: hidden（.commentbox）或使用one of the other float containing techniques這樣做。

Answer 2

由於您已經在父div上使用了position:relative。試試這個：

.count { 
    position:absolute; 
    right:0; 
    bottom:10px; 
} 

Answer 3

可能你必須在「count」div後添加一個清除。

<style type="text/css"> 
body{ 
background-color:#f3f3f3; 
} 
.commentbox{ 
background-color: #ffffff; 
width: 200px; 
border-color: #D1D1D1; 
border-radius: 4px; 
border-style: solid; 
border-width: 1px; 
padding-bottom: 9px; 
padding-left: 9px; 
padding-right: 9px; 
padding-top: 9px; 
position:relative; 
} 
.count{ 
float:right; 
text-align:right; 
} 
</style> 

<div class="commentbox"> 
<div class="title">Some several lines long long long long content text goes here 
</div> 
<div class="count">123<br>456</div> 
<div style="clear: both"></div> 
</div> 

Answer 4

你真的需要爲float: right;.count？我認爲text-align應該足以滿足所需的佈局。