एक अभिभावक डिव ऑटो का आकार अपने बच्चों की चौड़ाई में कैसे करें

Question

मैं माता-पिता को केवल बच्चे के बच्चे के रूप में व्यापक बनाने की कोशिश कर रहा हूं। ऑटो चौड़ाई माता-पिता को पूरी स्क्रीन फिट कर रही है। बच्चे divs अपनी सामग्री के आधार पर अलग-अलग चौड़ाई के होंगे इसलिए मुझे तदनुसार समायोजित करने के लिए माता-पिता div की आवश्यकता है।

<div style='width:auto;'>
  <div style="width: 135px; float: left;">
    <h4 style="padding-right: 5px; padding-left: 15px;">Column1</h4>
    <dl style="padding-right: 5px; padding-left: 15px; margin-top: -8px; overflow-x: hidden;">
      <dd style="white-space: nowrap;">1</dd>
      <dd style="white-space: nowrap;">2</dd>
    </dl>

    <h4 style="padding-right: 5px; padding-left: 15px;">Column1</h4>
    <dl style="padding-right: 5px; padding-left: 15px; margin-top: -8px; overflow-x: hidden;">
      <dd style="white-space: nowrap;">1</dd>
      <dd style="white-space: nowrap;">2</dd>
    </dl>
  </div>

  <div style="width: 135px; float: right;">
    <h4 style="padding-right: 5px; padding-left: 10px;">Column2</h4>
    <dl style="padding-right: 5px; padding-left: 15px; margin-top: -8px; overflow-x: hidden;">
      <dd style="white-space: nowrap;">1</dd>
      <dd style="white-space: nowrap;">2</dd>
      <dd style="white-space: nowrap;">3</dd>
    </dl>
  </div>
</div>

Answer 1

आपके आंतरिक <div>तत्वों की संभावना दोनों होनी चाहिए float:left। स्वचालित रूप से उनके कंटेनर की चौड़ाई का आकार 100% तक विभाजित करता है। कंटेनर div पर के display:inline-blockबजाय का उपयोग करने का प्रयास करें width:auto। या संभवतः float:leftकंटेनर और भी लागू होते हैं overflow:auto। आप वास्तव में क्या कर रहे हैं पर निर्भर करता है।

Comments

धन्यवाद मैडब्रेक्स। दोनों बायीं फ्लोट्स बनाना कुछ ऐसा है जिसकी मैंने कोशिश नहीं की

— ब्रैडली 4

ओवरफ्लो ऑटो ने मेरे लिए यह किया

— सरसराहट

"प्रदर्शन: इनलाइन-ब्लॉक" एक अच्छा तरीका है, लेकिन यदि आप बाल तत्व की चौड़ाई के लिए प्रतिशत मूल्य का उपयोग करना चाहते हैं, तो यह आपकी अपेक्षा के अनुरूप काम नहीं करेगा। प्रतिशत मूल्यों के साथ काम करने के लिए कोई विचार?

— मोहसिन हेरी

@MohsenHaeri आप नहीं कर सकते। बच्चे के लिए प्रतिशत चौड़ाई की गणना माता-पिता की चौड़ाई से की जाती है। इसके बारे में सोचो, अगर मेरे दो बच्चे हैं width: 50%तो माता-पिता कितने विस्तृत हैं?

— मडब्रेक्स

@Madbreaks मुझे पता है कि। इसलिए मैं ऐसा करने के लिए हैक की तलाश कर रहा हूं। जेएस तरीके उपलब्ध हैं, लेकिन मैं शुद्ध सीएसएस तरीके का पता नहीं लगा सका। वैसे भी, आपके ध्यान के लिए धन्यवाद।

— मोहसिन हेरी

Answer 2

पैरेंट डिव (मेरा मानना ​​है कि सबसे बाहरी डिव) है display: blockऔर इसके कंटेनर के सभी उपलब्ध क्षेत्र को भर देगा (इस मामले में, शरीर) जो कर सकता है। एक अलग प्रदर्शन प्रकार का उपयोग करें - inline-blockसंभवतः वह है जो आप के लिए जा रहे हैं:

http://jsfiddle.net/a78xy/