css - Verkleinert ein übergeordnetes div, um es an die Breite des einen Kindes anzupassen und die Breite des anderen Kindes zu beschränken

Angenommen, ein übergeordnetes Div hat zwei untergeordnete Divs, von denen einer Text und der andere ein Bild mit bekannter (aber variabler) Breite und Höhe enthält.

Ich würde gern

die Breite des ersten untergeordneten (bildhaltigen) Div, das verkleinert werden soll, um der Breite des Bildes zu entsprechen (das kann ich tun)Das übergeordnete Div (mit nicht angegebener Breite) wird verkleinert, um es an die Breite des bildhaltigen Div anzupassen (dies ist auch in Ordnung).Die texthaltige zweite untergeordnete Div. (ebenfalls von nicht angegebener Breite), um der Breite der übergeordneten Div. zu entsprechen, unabhängig von der enthaltenen Textmenge (hier wird es schwierig).

Ich habe eine Arbeitsversion, die macht, was ich willbis um Durch die Textmenge im zweiten untergeordneten Element wird die Breite des übergeordneten Bereichs größer als die des Bildes.

Hier ist mein Code:

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>

und hier ist eine jsfiddle:http://jsfiddle.net/BmbAS/1/

Sie können sehen, wo es schief geht, indem Sie auf den Link "Text verlängern / verkürzen" klicken, um die Textmenge zu erhöhen

tldr - Ich möchte, dass alle Divs die gleiche Breite haben, die der Breite des Bildes entspricht

ps. Nur moderne Browser-Lösung erforderlich

Antworten auf die Frage(2)

Ihre Antwort auf die Frage