अपने बच्चों के divs

Question

0/पर पैरेंट div ऑटो आकार कैसे बनाएं, मैं मूल div को केवल बच्चे div के रूप में चौड़ा बनाने की कोशिश कर रहा हूं। ऑटो चौड़ाई माता-पिता div को पूरी स्क्रीन में फिट कर रही है। बच्चे 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 होना चाहिए। Divs आकार स्वचालित रूप से उनके कंटेनर चौड़ाई के आकार 100% करने के लिए। कंटेनर div पर width:auto के बजाय display:inline-block का उपयोग करने का प्रयास करें। या संभवतः float:left कंटेनर और overflow:auto भी लागू करें। इस पर निर्भर करता है कि आप वास्तव में क्या कर रहे हैं।

Answer 2

पैरेंट div (मैं बाहरीतम div मानता हूं) display: block है और यह इसके कंटेनर (इस मामले में, शरीर) के सभी उपलब्ध क्षेत्र को भर देगा।

http://jsfiddle.net/a78xy/