为什么我的内容显示在div之外？

I have a "bubble" with content, which is working fine. Now, I want to display a count (2 lines) which should always be in the bottom right corner of that div, INSIDE it. I tried many things but for some reason it always overlaps the div and shows outside. What am I doing wrong?

我有一个内容的“泡沫”，工作正常。现在，我想显示一个计数（2行），它应该始终位于该div的右下角，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>

4 个解决方案

#1

You are floating .count so it doesn't influence it's parent container's height.

你浮动.count所以它不会影响它的父容器的高度。

Set overflow: hidden on the parent (.commentbox) or use one of the other float containing techniques so that it does.

设置溢出：隐藏在父（.commentbox）上或使用其他浮动包含技术之一，以便它可以。

#2

Do you really need float: right; for .count? I think text-align should be enough for the desired layout.

你真的需要漂浮吗：对;对于.count？我认为text-align应该足以满足所需的布局。

#3

Since you're already using position:relative on the parent div. Try this instead:

因为你已经在父div上使用position：relative了。试试这个：

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

#4

Probably you have to add a clear after the "count" div.

可能你必须在“计数”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>

#1