माता-पिता के div अपने बच्चों के साथ कैसे बढ़ते हैं?

Question

मैं माता-पिता/कंटेनर डीआईवी कैसे बढ़ सकता हूं क्योंकि अधिक बच्चे डीआईवी जोड़े जाते हैं।

<div id="container"> 
    <div id="child" style="height:100px;"> 
    </div> 
    <div id="child2" style="height:100px;"> 
    </div> 
</div> 

Answer 1

केवल कारण है कि अपने माता पिता div अपनी सामग्री के साथ विकसित नहीं होता है, तो यह सामग्री पूर्ण स्थिति में है या तैरता उपयोग कर रहा है, पूर्व मामले में में कुछ भी आपको जावास्क्रिप्ट के साथ यह आकार बदलने की कमी कर सकते हैं, बाद आप अपने अस्थायी तत्वों के अंत में निम्न कोड डाल सकते हैं:

<br style="clear: both"> 

तो कहते हैं कि दोनों अपने उदाहरण में बच्चे तत्वों एक नाव है, कोड इस

<div id="container"> 
    <div id="child" style="height:100px;"> 
      ** CONTENT GOES HERE ** 
      <br style="clear: both"> 
    </div> 
    <div id="child2" style="height:100px;"> 
      ** CONTENT GOES HERE ** 
      <br style="clear: both"> 
    </div> 
</div> 

कैसा लगेगा

आप किसी भी नोड का उपयोग कर सकते हैं, जब तक आप इसे "स्पष्ट: दोनों" का उपयोग करते हैं (इसलिए <div style="clear: both"></div> भी काम करेगा)।

Answer 2

यदि आपके <div> के अंदर की सामग्री चलती है, तो यह विस्तार नहीं होगी। आप overflow:hidden सीएसएस शैली को पैरेंट <div> पर रख कर आसानी से इसे ठीक कर सकते हैं। ध्यान दें, अगर बच्चे पूरी तरह से तैनात हैं तो यह काम नहीं करेगा। जब आप पूरी तरह से तत्व को स्थिति देते हैं, तो आप इसे दस्तावेज़ प्रवाह से बाहर ले जा रहे हैं। जहां तक ​​पोजीशनिंग का सवाल है, वह तत्व अब "बच्चा" नहीं है, भले ही अर्थात् यह अभी भी है।

<div style="overflow:hidden"> 
    <div style="float:left"> 
    <!--Content--> 
    </div> 
    <div style="float:left"> 
    <!--Content--> 
    </div> 
</div> 

Answer 3

प्रदर्शन का उपयोग: अभिभावक div में तालिका इसे बढ़ती है भले ही इसकी सामग्री फ़्लोटिंग तत्व हो। यह div मूल रूप से एक टेबल की तरह व्यवहार करता है।

प्रदर्शन गुण के लिए एक नज़र डालें: http://www.w3.org/wiki/CSS/Properties/display

Answer 4

आमतौर पर मैं एक फिक्स वर्ग बनाने के लिए:

.clearfix{clear:both;} 

उसके बाद, आप हमेशा उस का उपयोग कर सकते हैं जब आप की जरूरत है।

<div class='wrapperContainer'> 
    <div class="classFloated"> 
     Content 
    </div> 
    <div class="clearfix"></div> 
    <div class="classFloated"> 
     Content 
    </div> 
    <div class="clearfix"></div> 
</div>