css - reducir un div principal para ajustarse al ancho de un niño y limitar el ancho del otro

Question

Digamos que un div principal tiene dos divs secundarios, uno que contiene texto y el otro que contiene una imagen de ancho conocido & .

me gustaría

• la anchura del primer hijo div para reducir el tamaño para adaptarse a la anchura de la imagen (esto puedo hacer)
• el div padre (de ancho sin especificar (que contiene la imagen a)) para reducir el ancho del div que contiene la imagen (también está bien)
• el segundo div secundario con texto (también de ancho no especificado) para que coincida con el ancho del div principal independientemente de la cantidad de texto que contenga (Aqui es donde se pone complicado).

que tienen una versión de trabajo que hace lo que quiero hasta que la cantidad de texto en el segundo niño empuja el ancho de la div padre amplio que el de la imagen.

Aquí está mi código:

css:

#container{border:1px solid #f00;display:inline-block;} 
#child1{border:1px solid #0f0;} 
#child2{border:1px solid #00f;} 
img {border:1px solid #000;} 

html:

<div id="container"> 
<div id="child1"><img src="//www.google.com/logos/2012/Teachers_Day_Alt-2012-hp.jpg" width="300" height="116"></div> 
<div id="child2">Lorem ipsum dolor sit amet.</div> 
</div> 

y aquí hay un jsFiddle: http://jsfiddle.net/BmbAS/1/

se puede ver dónde va mal haciendo clic el enlace 'alargar/acortar texto' para aumentar la q uantity de texto

tldr - i desea que todos los divs para tener la misma anchura que es igual a la anchura de la imagen

ps. solución de navegador moderna solo necesaria

Answer 1

Consulte this edited version de su jsFiddle.

Esto es lo que se agrega a la CSS:

#container { 
    display: table-cell; 
} 
#child1 { 
    display: table-row; 
    width: 1px; 
} 
#child2 { 
    display: table-cell; 
    width: 1px; 
} 

Answer 2

Si usted está dispuesto a utilizar un poco de Javascript (jQuery en este ejemplo), puede configurar el ancho de la div de texto con la anchura de la imagen div.

Trate de añadir $("#child2").css({'width': $('#child1').width()}); hasta el final de la JS en su violín, o visite el tenedor aquí: http://jsfiddle.net/VXEMu/