Cómo hacer que un div principal tenga un tamaño automático del ancho de sus divs secundarios

81

Estoy tratando de hacer que el div padre sea tan ancho como el div hijo. El ancho automático hace que el div principal se ajuste a toda la pantalla. Los divs secundarios tendrán diferentes anchos según su contenido, por lo que necesito que el div principal se ajuste en consecuencia.

<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>
html css Bradley4
fuente

Respuestas:

91

Tus <div>elementos interiores probablemente deberían ser ambos float:left. Divide el tamaño al 100% del tamaño del ancho de su contenedor automáticamente. Intente usar en display:inline-blocklugar de width:autoen el contenedor div. O posiblemente float:leftel envase y también aplicar overflow:auto. Depende de lo que busques exactamente.

Madbreaks
fuente
Gracias Madbreaks. Hacer los dos flotadores izquierdos es algo que no probé.
bradley4
overflow auto lo hizo por mí
papel oxidado
"display: inline-block" es una buena forma, pero si desea usar un valor porcentual para el ancho del elemento secundario, no funcionará como espera. ¿Alguna idea para que funcione también con los valores porcentuales?
Mohsen Haeri
@MohsenHaeri no puedes. El ancho porcentual del niño se calcula a partir del ancho del padre. Piénselo, si tengo dos hijos, width: 50%¿qué tan ancho es el padre?
Madbreaks
@Madbreaks lo sé. Por eso estoy buscando un truco para hacer eso. Las formas de J están disponibles, pero no pude encontrar una forma de CSS pura. De todos modos, gracias por su atención.
Mohsen Haeri
28

El div padre (supongo que el div más externo) es display: blocky llenará toda el área disponible de su contenedor (en este caso, el cuerpo) que pueda. Use un tipo de pantalla diferente, inline-blockprobablemente sea lo que está buscando:

http://jsfiddle.net/a78xy/

Pastillas de explosión
fuente