Bir ebeveyn div otomatik boyutu, çocuk divs genişliğine nasıl yapılır

Question

Ben ebeveyn div sadece çocuk div's kadar geniş yapmaya çalışıyorum. Otomatik genişlik, ebeveyn div'in tüm ekrana sığmasını sağlıyor. Çocukların div'ları içeriklerine bağlı olarak farklı genişliklerde olacaklar, dolayısıyla buna göre ayarlamak için ebeveyn div'a ihtiyacım var. Yardım ettiğin için teşekkür ederim!

<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

Sizin iç <div> elemanları olasılıkla hem float:left olmalıdır. Divs, konteyner genişliğinin% 100'ünü otomatik olarak boyutlandırır. Konteyner div üzerinde width:auto10 yerine display:inline-block kullanmayı deneyin. Ya da muhtemelen float:left konteyneri ve ayrıca overflow:auto'u uygulayın. Tam olarak neyin peşinde olduğuna bağlı.

Answer 2

Ebeveyn div (en dıştaki div'u varsayalım) display: block'dur ve kabının tüm kullanılabilir alanını (bu durumda, gövde) dolduracaktır.

http://jsfiddle.net/a78xy/