html - dinamico - div sin contenido
Cómo hacer que un padre div tamaño automático al ancho de sus divs hijos (2)
El div principal (supongo que el div más externo) es display: block
y rellenará toda el área disponible de su contenedor (en este caso, el cuerpo) que pueda. Use un tipo de pantalla diferente - en inline-block
es probablemente lo que está buscando:
Estoy tratando de hacer que el padre div solo sea tan ancho como el div infantil. El ancho automático hace que el div principal se ajuste a toda la pantalla. Los divs para niños tendrán diferentes anchuras dependiendo de su contenido, por lo que necesito el div principal para ajustarlo 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>
Sus elementos interiores <div>
probablemente deberían estar float:left
. Divs tamaño hasta 100% del tamaño de su ancho de contenedor de forma automática. Intenta usar display:inline-block
lugar de width:auto
en el contenedor div. O posiblemente float:left
el contenedor y también aplica el overflow:auto
. Depende de lo que busques exactamente.