आंतरिक divs को स्वचालित रूप से आंतरिक divs फिट करने के लिए बाहरी div की चौड़ाई बनाएं

Question

मेरे पास बाहरी div के अंदर 2 आंतरिक divs हैं, और मैं बाहरी div को आंतरिक divs की चौड़ाई में स्वचालित रूप से फिट करना चाहता हूं। क्या यह संभव है?

body { 
 
    font-size: 0; 
 
} 
 
#outer { 
 
    border: 1px solid black; 
 
} 
 
.inner { 
 
    font-size: 12px; 
 
    display: inline-block; 
 
    border: 1px solid red; 
 
}

<div id='outer'> 
 
    <div class='inner'>text1</div> 
 
    <div class='inner'>text2</div> 
 
</div>

Answer 1

आपका outer div एक ब्लॉक स्तर तत्व है। आपको इसे इनलाइन-लेवल तत्व बनाने की आवश्यकता है। Inline तत्व स्वचालित रूप से उस सामग्री का आकार लेते हैं जिसमें यह शामिल है। आपके द्वारा पूछे गए प्रश्न के संदर्भ में, बस सेटिंग:

display: inline-block 

आपके बाहरी div पर चाल चलती है। डेमो के लिए नीचे दिए कोड स्निपेट देखें:

body { 
 
     font-size: 0; 
 
    } 
 
    #outer { 
 
     border: 1px solid black; 
 
     display: inline-block; 
 
    } 
 
    .inner { 
 
     font-size: 12px; 
 
     display: inline-block; 
 
     border: 1px solid red; 
 
    }

<div id='outer'> 
 

 
    <div class='inner'> 
 
    text1 
 
    </div> 
 
    <div class='inner'> 
 
    text2 
 
    </div> 
 

 
</div>

आशा इस मदद करता है !!!

Answer 2

"प्रदर्शन: तालिका" जोड़ें

उदाहरण के लिए:: #outer सीएसएस के लिए

#outer { 
    border: 1px solid black; 
    display: table; 
} 

प्रदर्शन का उपयोग: तालिका इनलाइन

Answer 3

का उपयोग कर के रूप में कम दखल है आप #outer को position:absolute; या float:left; जोड़ देते हैं तो यह होगा दो भीतरी div को आकार के। इस उदाहरण के लिए, मैं float का उपयोग करूंगा। Floats आम तौर पर उस सामग्री के लिए बेहतर होता है जो समय के साथ संपादन के साथ बदल या विस्तार/संकीर्ण हो सकता है जबकि absolute positioning दस्तावेज़ के दस्तावेज़ प्रवाह या संरचना के बाहर उपयोग किया जाना चाहिए, जैसे नौसेना बार।

संपादित करें: आप बाहरी divdisplay:inline-block विधि नीचे तैनात काम करेंगे चारों ओर प्रवाह के लिए अन्य तत्वों की जरूरत नहीं है, लेकिन आप प्रवाह के लिए चारों ओर #outer तो float:left जाने का रास्ता हो जाएगा चाहते हैं, तो आप तत्वों की है। मान लें कि #outer चौड़ाई के 50% के रूप में है और display:inline-block का उपयोग कर पृष्ठ के दूसरे भाग पर कुछ और चाहते हैं #outer से नीचे अन्य तत्व डालेंगे।

CodePen link to show difference