dlaczego moje treści są wyświetlane poza div?

Question

Mam "bańkę" z treścią, która działa poprawnie. Teraz chcę wyświetlić liczbę (2 linie), która zawsze powinna znajdować się w prawym dolnym rogu tego elementu div, WEWNĄTRZ go. Próbowałem wielu rzeczy, ale z jakiegoś powodu zawsze nakładało się na div i pokazywało na zewnątrz. Co ja robię źle?

<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

Pływasz .count, więc nie wpływa to na wysokość kontenera nadrzędnego.

Ustaw overflow: hidden na rodzicu (.commentbox) lub użyj one of the other float containing techniques, aby to zrobił.

Answer 2

Ponieważ już używasz position:relative na div rodzica. Spróbuj zamiast tego:

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

Answer 3

Prawdopodobnie musisz dodać wyraźne po div "count".

<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

Czy naprawdę trzeba float: right; dla .count? Myślę, że text-align powinno wystarczyć dla pożądanego układu.