なぜ私のコンテンツは部門外に表示されますか？

Question

コンテンツが「バブル」で、うまくいきます。今、私はその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> 

Answer 1

ので、それは親コンテナの高さの影響力はありません。

親（.commentbox）にoverflow: hiddenを設定するか、one of the other float containing techniquesを使用してください。

Answer 2

親ディビジョンですでにposition:relativeを使用しているので、代わりにこれを試してください：あなたは.countを浮遊している

.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

はあなたが本当に.countためfloat: right;が必要ですか？私はtext-alignが望ましいレイアウトのために十分であるべきだと思います。