सामग्री की चौड़ाई

Question

साथ कंटेनर div का विस्तार करें मैं अपने आवेदन में निम्नलिखित संरचना है:

<div id="container"> 
    <div id="child_container"> 
    <div class="child"></div> 
    <div class="child"></div> 
    ... 
    <div class="child"></div> 
    </div> 
</div> 

प्रत्येक बच्चे div एक ज्ञात निश्चित चौड़ाई है, लेकिन आवेदन child_container div में सम्मिलित करने के लिए उनमें से अधिक की अनुमति देता है।

मैं जो करने की कोशिश कर रहा हूं वह है कि जब कंटेनर div की आवश्यकता होती है तो बच्चे के कंटेनर की कुल चौड़ाई दी जाती है।

यह वर्तमान में क्या होता है:

+------ container -------+ 
+--- child_container ----+ 
| child1 child2 child3 | 
| child4     | 
+------------------------+ 

अगर मैं एक निश्चित मान में child_container div चौड़ाई सेट, मैं पिछले कंटेनर div, जो एक सा बदसूरत होने के बावजूद काम करता है क्षैतिज विस्तार करने के लिए प्राप्त कर सकते हैं:

+------ container -------+ 
+------ child_container -+----+ 
| child1 child2 child3 child4 | 
+------------------------+----+ 

हालांकि, जब भी कोई नया बच्चा जोड़ा जाता है तो इसे पुन: गणना करने की आवश्यकता होती है।

वहाँ ऐसी है कि अंतिम परिणाम है

+--------- container ---------+ 
+------ child_container ------+ 
| child1 child2 child3 child4 | 
+-----------------------------+ 

धन्यवाद एक तरह से बच्चे को कंटेनर के लिए तय की चौड़ाई का उपयोग किए बिना ऐसा करने के लिए, एक रास्ता है।

Answer 1

इस तरह काम करना चाहिए:

#container, #child_container, .child { 
    position: relative; 
    float: left; 
} 

Answer 2

यदि आप युक्त div सहित सभी चीजें छोड़ते हैं, तो यह काम करेगा।

Answer 3

भी आसान:

<style> 
    #container{ display: inline-block; } 
</style> 

Answer 4

सिर्फ 120% माता पिता की चौड़ाई सेट और किया =)

Answer 5

पैरेंट कंटेनर जीता ' जब कोई बच्चा तत्व जोड़ा जाता है तो टी बढ़ता नहीं है।

+------ container -------+ 
+--- child_container ----+ 
| child1 child2 child3 | 
| child4     | 
+------------------------+ 

लेकिन हम सीएसएस 3 फ्लेक्स बॉक्स का उपयोग करके अगली पंक्ति पर नए के प्रतिपादन से बच सकते हैं। नमूना रखा गया है नीचे उल्लेख path

.products{ 
      display: -webkit-flex; 
      -webkit-flex-flow: row; 
      /*-webkit-justify-content: center;*/ 
     } 
     .products > div{ 
      padding: 0 4em; 
     } 

परिणाम इस तरह दिखेगा:

+--- child_container ----+| 
| child1 child2 child3 ch|ild4 child5 
|       | 
+------------------------+