Aquí está mi pequeño problema (el valor es apenas aquí para el ejemplo):Extender una anchura div en base a sus hijos ancho
Digamos que tengo una ventana con un ancho de alrededor de 500 píxeles. Dentro de mi documento, tengo un div exterior sin ancho especificado, pero el siguiente CSS:
.outer{
white-space:nowrap;
background:blue;
}
Dentro de este div otros 3 div que tiene las siguientes propiedades:
.t1{
display:inline-block;
width:400px;
}
(Note la . anchura de 400px Ahí es donde el problema es que la línea es más ancha que la ventana, y el div exterior no se extiende el HTML se parece a lo siguiente:.
<div class="outer">
<div class="t1">1</div>
<div class="t1">2</div>
<div class="t1">3</div>
</div>
Lo que intento lograr es tener los 3 divisores internos con fondo azul, sin configurarlos para la clase t1. Lo que producirá este ejemplo es un fondo azul limitado al ancho de la ventana.
Véase el ejemplo completo aquí: http://jsfiddle.net/sjCTR/ (que tendrá que adaptar la esquina inferior izquierda si la pantalla es grande)
Me pregunto si de alguna manera se podría lograr a través única css/html, sin establecer el ancho div externo/el fondo div interior?
No estoy seguro de que entiendo su problema. ¿Estás tratando de forzar el ancho de cada '.t1' para que siempre sea 400px o siempre el 33% o algo más? – Godwin
No, el número que puse aquí está solo para el ejemplo. El problema es más complejo, pero la idea es que el ancho del div externo no crezca para ajustarse al ancho de sus hijos. –