Подтвердить что ты не робот

Как сделать размер div родителя div максимальным для его дочерних divs

Я пытаюсь сделать родительский div только таким же широким, как дочерний div. Автоматическая ширина делает родительский div подходящим для всего экрана. Диверы для детей будут различной ширины в зависимости от их содержимого, поэтому мне нужно, чтобы родительский 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>
4b9b3361

Ответ 1

Элементы интерьера <div> должны быть как float:left. Размер Divs до 100% размер их ширины контейнера автоматически. Попробуйте использовать display:inline-block вместо width:auto в контейнере div. Или, возможно, float:left контейнер, а также применить overflow:auto. Зависит от того, что вы точно.

Ответ 2

Родительский div (я предполагаю, что самый внешний div) равен display: block и заполнит всю доступную область своего контейнера (в данном случае, тело), ​​что он может. Используйте другой тип отображения - inline-block - это, вероятно, то, что вы собираетесь делать:

http://jsfiddle.net/a78xy/