11

コンテンツの「バブル」があり、正常に機能しています。ここで、常にそのdivの右下隅にあるはずのカウント（2行）をその中に表示したいと思います。私は多くのことを試みましたが、何らかの理由でそれは常に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）に設定するか、他のフロートを含むテクニックの1つを使用してください。

于 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 に答える