अभिभावक div को अपने फ़्लोटिंग बच्चों को लपेटने (और सिकुड़ने) कैसे करें?

Question

मेरे पास एक उत्तरदायी लेआउट है जिसमें तत्वों का एक गुच्छा शामिल है।

एचटीएमएल:

<div class="parent"> 
    <div class="header"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

सीएसएस:

.parent { 
    background: red; 
    display:inline-block; 
} 

.child { 
    background: green; 
    width:100px; 
    height:100px; 
    float:left; 
} 

.header { 
    background: yellow; 
    width:100%; 
    height:30px; 
} 

JSFiddle

क्या मैं प्राप्त करने के लिए शीर्ष लेख बना रही है कोशिश कर रहा हूँ (पीले बॉक्स यहाँ कोड का एक बहुत ही सरलीकृत संस्करण है) उसी चौड़ाई को ले लें जैसे बच्चे divs (हरे रंग के बक्से)। और यह अच्छी तरह से काम करता है जब लेआउट पहली बार में प्रदान की गई है, यहाँ JSFiddle

लेकिन से एक स्क्रीनशॉट है स्क्रीन आकार, अधिक हैडर सही ढंग से हटना नहीं करता संकीर्ण हो जाता है जब यहाँ एक छोटे क्षेत्र के लिए एक स्क्रीनशॉट है:

मैं इसे पता लगाने की कोशिश में कुछ घंटे बिताए, लेकिन मैं नहीं कर सकता। चुनौती यह है कि मैं पहले से नहीं पता है कि हरी बक्से की संख्या के रूप में वे गतिशील रूप से नेट से

अद्यतन 1

तथ्य प्रदान कर रहे हैं कि हरी बक्से लपेट होने जा रहा है है वांछित है, जो मैं प्राप्त करने की कोशिश कर रहा हूं वह पीले रंग के बॉक्स के लिए हरे रंग के बक्से की संयुक्त चौड़ाई के समान चौड़ाई है। वांछित परिणाम:

Answer 1

मैं इसे शुद्ध सीएसएस के साथ तुम क्या चाहते करने के लिए संभव है नहीं लगता। लटकती जगह वहां है क्योंकि यह कितनी जगह है छोड़ दिया गया है। बॉक्स बस नीचे चला गया है क्योंकि ऊपर कोई जगह नहीं है, आप पीले हेडर को कम नहीं कर सकते क्योंकि यह इस तथ्य के बारे में कुछ भी नहीं जानता है कि हरे रंग के बक्से फिट नहीं होते हैं। मैंने कुछ हैक्स की कोशिश की लेकिन इसे काम नहीं कर सका। जेएस के साथ सबसे सुरक्षित शर्त है।

हालांकि, यहां कुछ विकल्प हैं जिन्हें आप जांचने लायक हो सकते हैं यदि आप अपने डिज़ाइन को थोड़ा सा बदलना चाहते हैं।

1. सभी

में आकार निर्दिष्ट आप flex-box अपने काम करते हैं कर सकते हैं मत करो। JSFiddle। तत्वों की हर संख्या के साथ काम करता है, लेकिन माता-पिता के आकार और बच्चों की संख्या के आधार पर वे बहुत बड़े या बहुत छोटे होते हैं।

2. फिर inbetween

बचाव के लिए flex-box अंतरिक्ष के लिए अनुमति दें, तो आप justify-content: space-between का उपयोग सही ढंग से सबसे सही बॉक्स को सबसे-बाएँ बॉक्स के शीर्ष लेख रखने के लिए कर सकते हैं, लेकिन बीच की जगह को पेश। JSFiddle।