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

Question

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

<div class="Parent"> <!-- 3 Children, should be 450px wide--> 
    <div class="Child"></div> 
    <div class="Child"></div> 
    <div class="Child"></div> 
</div> 
<div class="Parent"> <!-- 2 children, should be 300px wide--> 
    <div class="Child"></div> 
    <div class="Child"></div> 
</div> 

चाइल्ड डिव सभी निश्चित फ्लोट के साथ "फ्लोट: बाएं" हैं। मैं माता-पिता div को अपने फ़्लोटिंग बच्चों की चौड़ाई के बराबर कैसे बना सकता हूं? प्रत्येक माता-पिता में बच्चों की संख्या अलग-अलग होती है और अज्ञात होती है लेकिन बच्चों को एक पंक्ति में लाइन अप करना होगा, बिना किसी नई लाइन पर लपेटे।

उदाहरण: यदि सभी तीन बच्चे 150 पीएक्स हैं, तो माता-पिता 450 पीएक्स बनना चाहिए ताकि कोई भी बच्चे लपेट सके। यदि दो 150 पीएक्स बच्चे हैं, तो माता-पिता 300 पीएक्स बनना चाहिए।

अद्यतन:

"फिडल" बहुत अच्छा है। यहां समस्या का एक डेमो है: http://jsfiddle.net/AG3c9/6/

जब आप जानवरों पर होवर करते हैं, तो आप देख सकते हैं कि पक्षी, सरीसृप और मछली एक-दूसरे के ऊपर खड़ी हैं। उन्हें तरफ से दिखाना चाहिए। http://jsfiddle.net/AG3c9/8/

मैं इसे माता-पिता के लिए मजबूर कर एक निश्चित चौड़ाई होने के लिए द्वारा मिल गया:

यह है कि मैं क्या यह देखने के लिए की तरह चाहते हैं। लेकिन माता-पिता को इसके बच्चों के आधार पर अलग-अलग होना चाहिए और निश्चित चौड़ाई नहीं होना चाहिए।

Answer 1

फ्लोट .Parentdiv रों:

Live Demo

मेरे टेस्ट सीएसएस:

.Parent { 
    float: left; 
    background: #ccc; 

    margin: 0 0 16px 0; 
    clear: both 
} 
.Child { 
    float: left; 
    width: 150px; 
    height: 50px; 
} 

---

यही होता है जब आप नहीं float: left माता पिता div करना है:

http://jsfiddle.net/thirtydot/AG3c9/1/