माता-पिता div के फ्रेम के अंदर फ़्लोटिंग div को कैसे रखा जाए?

Question

मेरे पास एक div है जिसमें फ्लोट सेटिंग के साथ कई अन्य divs हैं: बाएं। अब मैं उन सभी को चारों ओर एक फ्रेम चाहते हैं, तो मैं माता पिता div पर एक सीमा डाल दिया, लेकिन अस्थायी वाले "प्रवाह" फ्रेम से बाहर ...

सीएसएस:

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

एचटीएमएल:

<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> 

मैं पैरेंट फ्रेम के अंदर रखने के लिए (सीएसएस में) क्या कर सकता हूं?

Answer 1

अपने माता पिता <div> करने के लिए overflow: hidden जोड़ने - http://jsfiddle.net/5AVA8/

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

Answer 2

आप नाव स्पष्ट 'चाहिए, वहाँ' नाव समाशोधन 'के विभिन्न तरीके हैं। कुछ समाधान शामिल सीएसएस केवल, मेरे पसंदीदा समाधान (क्योंकि यह अतिरिक्त मार्कअप कहते हैं कुछ लोगों द्वारा भी पसंद नहीं) एक 'समाशोधन div' जोड़ने के लिए है, यह इस प्रकार काम करता है:

<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> 

अंतिम पंक्ति से दूसरे देखें।

Answer 3

आप फ्लोट को साफ़ नहीं कर रहे हैं। यदि आप इस पर अपना कोड बदलते हैं तो यह आपकी समस्या का समाधान करेगा।

.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> 

उदाहरण मैं यहाँ सेट कर लेते हैं देखें - http://jsfiddle.net/spacebeers/RQNDr/

स्पष्ट संपत्ति के बारे में अधिक जानकारी के लिए - http://css.maxdesign.com.au/floatutorial/

बस ब्याज क्या स्पष्ट div पर इस का लाभ है से बाहर