11

我有一个包含内容的“泡沫”，效果很好。现在，我想显示一个计数（2 行），它应该始终位于该 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>
4

4 回答 4

19

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

overflow: hidden在父级 ( ) 上设置.commentbox或使用其他包含浮点数的技术之一来实现。

于 2012-04-08T11:00:24.477 回答
2

你真的需要float: right;吗.count？我认为text-align对于所需的布局应该足够了。

于 2012-04-08T11:04:22.090 回答
1

由于您已经position:relative在父 div 上使用。试试这个：

.count {
   position:absolute;
   right:0;
   bottom:10px;
}
于 2012-04-08T10:59:45.540 回答
-1

可能您必须在“计数” 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>
于 2012-04-08T11:03:45.660 回答