Jak zrobić rodzic div wielkości auto szerokości swoich dzieci div

Question

Próbuję zrobić div nadrzędnej tylko tak szeroki jak div dziecka. Automatyczna szerokość powoduje, że element nadrzędny pasuje do całego ekranu. Elementy div dzieci będą miały różne szerokości w zależności od ich zawartości, więc potrzebuję odpowiedniego elementu div. Dzięki za pomoc!

<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

Twoje wnętrze <div> elementy powinny prawdopodobnie być zarówno float:left. Rozmiar dywizjów do 100% automatycznie dopasowuje rozmiar ich kontenera. Spróbuj użyć display:inline-block zamiast width:auto w div pojemnika. Ewentualnie float:left pojemnik, a także zastosować overflow:auto. Zależy od tego, o co dokładnie chodzi.

Answer 2

Element div (przyjmujący najbardziej zewnętrzny element div) to display: block i wypełnia cały dostępny obszar swojego kontenera (w tym przypadku ciało), który może. Użyj innego rodzaju wyświetlacz - inline-block jest chyba to, co będzie dla:

http://jsfiddle.net/a78xy/