为什么我的内容在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应该足以满足所需的布局。