tại sao nội dung của tôi hiển thị bên ngoài div?

Question

Tôi có một "bong bóng" với nội dung đang hoạt động tốt. Bây giờ, tôi muốn hiển thị một số (2 dòng) mà luôn luôn nên ở góc dưới bên phải của div đó, INSIDE nó. Tôi đã thử nhiều thứ nhưng vì lý do nào đó, nó luôn chồng chéo div và hiển thị bên ngoài. Tôi đang làm gì sai?

<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

Bạn đang nổi .count để nó không ảnh hưởng đến chiều cao của vùng chứa chính.

Đặt overflow: hidden trên bố mẹ (.commentbox) hoặc sử dụng one of the other float containing techniques để thực hiện.

Answer 2

Vì bạn đã sử dụng position:relative trên div cha. Hãy thử thay thế này:

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

Answer 3

Có thể bạn phải thêm rõ ràng sau div "đếm".

<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

Bạn có thực sự cần float: right; cho .count? Tôi nghĩ rằng text-align là đủ cho bố cục mong muốn.