Làm thế nào để giữ nổi div bên trong khung của div mẹ?

Question

Tôi có một div chứa một số div khác với float thiết lập: left. Bây giờ tôi muốn có một khung xung quanh tất cả trong số họ, do đó, tôi đặt một biên giới trên div cha mẹ, nhưng những người nổi "dòng chảy" ra khỏi khung ...

CSS:

.rendering { 
    padding-left:10pt; 
    border-width: 1px; 
    border-style: solid; 
} 
.column { 
    float:left; 
    padding-left:10pt; 
} 

Html:

<div class="rendering"> 
    <div class="column"> 
     <img class="ImagePlugin" src="some-image"> 
    </div> 
    <div class="column"> 
     <span class="phone">999</span> 
     <span class="name">Assange</span> 
    </div> 
</div> 

Tôi có thể làm gì (trong CSS) để giữ chúng bên trong khung chính?

Answer 1

thêm overflow: hidden để cha mẹ của bạn <div> - http://jsfiddle.net/5AVA8/

.rendering { 
    padding-left:10pt; 
    border-width: 1px; 
    border-style: solid; 
    overflow: hidden; 
} 

Answer 2

Bạn phải 'xóa phao', có những phương pháp khác nhau của 'thanh toán bù trừ phao'. Một số giải pháp liên quan đến CSS chỉ, giải pháp ưa thích của tôi (không thích bởi một số người vì nó bổ sung thêm đánh dấu) là thêm một 'thanh toán bù trừ div', nó hoạt động như sau:

<div class="rendering"> 
    <div class="column"> 
     <img class="ImagePlugin" src="some-image"> 
    </div> 
    <div class="column"> 
     <span class="phone">999</span> 
     <span class="name">Assange</span> 
    </div> 
    <div style="clear:both"></div> 
</div> 

Xem thứ hai từ dòng cuối cùng.

Answer 3

Bạn không xóa các phao. Nếu bạn thay đổi mã của bạn thành nó, nó sẽ giải quyết vấn đề của bạn.

.rendering { 
    padding-left:10pt; 
    border-width: 1px; 
    border-style: solid; 
} 
.column { 
    float:left; 
    padding-left:10pt; 
} 

.clear { 
    clear: both; 
} 

<div class="rendering"> 
    <div class="column"> 
     <img class="ImagePlugin" src="some-image"> 
    </div> 
    <div class="column"> 
     <span class="phone">999</span> 
     <span class="name">Assange</span> 
    </div> 

    <div class="clear"></div> 
</div> 

Xem ví dụ tôi đã thiết lập ở đây - http://jsfiddle.net/spacebeers/RQNDr/

Để biết thêm thông tin về tài sản rõ ràng - http://css.maxdesign.com.au/floatutorial/