Warum zeigt mein Inhalt außerhalb des div?

Question

Ich habe eine "Blase" mit Inhalt, die gut funktioniert. Jetzt möchte ich eine Zählung (2 Zeilen) anzeigen, die immer in der unteren rechten Ecke dieses Divs sein sollte, INSIDE. Ich habe viele Dinge ausprobiert, aber aus irgendeinem Grund überlappt es immer das Div und zeigt nach draußen. Was mache ich falsch?

<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

Sie schweben .count, damit es nicht beeinflussen, es ist Höhe des übergeordneten Containers.

Setzen Sie overflow: hidden auf den übergeordneten (.commentbox) oder verwenden Sie one of the other float containing techniques, so dass es funktioniert.

Answer 2

Da Sie bereits verwenden position:relative auf der Eltern Div. Versuchen Sie stattdessen:

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

Answer 3

Wahrscheinlich müssen Sie eine klare nach der "Anzahl" div hinzufügen.

<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

Sie benötigen float: right; für .count wirklich? Ich denke text-align sollte genug für das gewünschte Layout sein.