अपने फ्लोट किए गए बच्चों को फिट करने के लिए क्षैतिज रूप से एक पैरेंट div का विस्तार

Question

मेरे पास एक मूल div है जो समान रूप से आकार वाले बाल divs की एक चर संख्या के साथ बाईं ओर तैरता है। मैं माता-पिता को बच्चों की चौड़ाई तक विस्तार करना चाहता हूं, इससे कोई फर्क नहीं पड़ता कि क्या इसका मतलब है कि इसका स्वयं का कंटेनर बह रहा है।

क्या यह स्वाभाविक रूप से HTML/CSS के साथ ऐसा करने का कोई तरीका है?

उदाहरण (खींचे div 180px विस्तृत किया जा रहा है हवा होगा):

HTML:

<div id="stretchable-div"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    ... 
</div 

सीएसएस:

.child { 
    width: 60px; 
    height: 60px; 
    float:left; 
} 

Answer 1

इस उदाहरण खींचे-div तत्व अपनी मूल से बाहर खराब होगा, और करने के लिए खिंचाव में अपनी बच्चे।

Live Demo

सीएसएस

#parent{ 
    width:200px; 
    height:180px; 
    background:red; 
} 

#stretchable-div{ 
    background:blue; 
    position: absolute; 
} 

.child { 
    width: 60px; 
    height: 60px; 
    float:left; 
} 

मार्कअप

<div id="parent">Im a parent 
    <div id="stretchable-div"> 
     <div class="child">a</div> 
     <div class="child">b</div> 
     <div class="child">c</div> 
     <div class="child">c</div> 
     <div class="child">c</div> 
     <div class="child">c</div> 
     <div class="child">c</div> 
    </div> 
</div> 

Answer 2

आप display: inline-block; के लिए जोड़ सकते हैं मूल तत्व Ie7 में काम करने के लिए आपको इसके बजाय display:inline;zoom:100%; का उपयोग करने की आवश्यकता है।

तो आप क्या जरूरत के लिए एक संभावित सीएसएस यह है:

#stretchable-div { 
    background: none repeat scroll 0 0 red; 
    display: inline-block; 
    overflow: auto; /* clear the floats */ 
    *display:inline; /* ie7 hack even better use conditional comment */ 
    zoom:100%; 
} 

उदाहरण:http://jsfiddle.net/8JJSf/

Answer 3

वैसे ही जैसे @ पिज्ज़ीकाटो के उदाहरण है, लेकिन का उपयोग कर overflow:hidden पैरेंट div: http://jsfiddle.net/dSjv4/ को साफ़ करने के लिए।

ए सूची के अलावा here (लेख के अंत के पास) पर स्थिति निर्धारण और समाशोधन के बारे में एक शानदार लेख है।