आप कैसे फ़्लोटिंग divs को संरेखित करते हैं जहां पैरेंट कंटेनर की चौड़ाई नहीं होती है?

Question

मुझे पता है कि पहले से ही इसी तरह के प्रश्न पूछे गए हैं, लेकिन मैंने एक ऐसा नहीं देखा है जहां मूल div के पास एक निश्चित उत्तर के साथ अज्ञात चौड़ाई है।

तो यहां स्थिति है।

<style> 
.parent { 
    width: 100%; 
} 

.child { 
    width: 300px; 
    float: left; 
} 

</style> 

<div class="parent> 
    <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> 

असल में, मैं उपयोगकर्ता के स्क्रीन संकल्प का समर्थन कर सकते के रूप में माता पिता के कंटेनर में के रूप में कई बच्चे divs फिट करने के लिए चाहते हैं।

मैं सीएसएस 3 मीडिया प्रश्नों का उपयोग नहीं करना चाहता क्योंकि मैं आईई 7 का समर्थन करना चाहता हूं।

मैंने माता-पिता को चौड़ाई निर्दिष्ट करने के लिए जावास्क्रिप्ट का उपयोग करने का प्रयास किया लेकिन यह आदर्श नहीं है क्योंकि सामग्री लोड होने के बाद केंद्र में कूद जाती है। कोई विचार?

Answer 1

यह जावास्क्रिप्ट के उपयोग के बिना निकटतम समाधान है। यह display:inline-block; है जो divs साइड बार पक्ष बनाता है और एक ही समय में केंद्र में होता है। मैंने display:table-cell; में पैरेंट को चालू करने का प्रयास किया है लेकिन काम नहीं किया है। तो शक्तिशाली केंद्रित व्यवहार के लिए वास्तविक <table> का उपयोग करने की आवश्यकता है।

http://jsfiddle.net/Dgdhr/

संपादित: http://jsfiddle.net/Dgdhr/1 (टेबल के बिना: धन्यवाद MartinodF को)

<table width="100%"> 
<tr> 
<td align="center"> 
      <div class="child">1</div> 
      <div class="child">2</div> 
      <div class="child">3</div> 
      <div class="child">4</div> 
      <div class="child">5</div> 
      <div class="child">6</div> 
</td> 
</tr> 
</table> 

.child { 
    width: 100px; 
    height:100px; 
    margin:10px; 
    display:inline-block; 
    background:#e0e0e0; 
}