css - ein Eltern-div verkleinern, um die Breite eines Kindes anzupassen und die Breite des anderen Kindes einzuschränken

Question

Angenommen, ein Eltern-div hat zwei untergeordnete divs, eines enthält Text, das andere enthält ein Bild bekannter (aber variabler) Breite & height .

würde ich

• die Breite des ersten Kindes gefällt! (Bild-haltig) div die Breite des Bildes passen zu schrumpfen
• die Eltern div (nicht näher bezeichneten Breite (dies kann ich tun)) um die Breite des bildhaltigen div zu verkleinern (dies ist auch in Ordnung)
• der Text enthält das zweite untergeordnete div (auch mit nicht spezifizierter Breite), um der Breite des Elternteils zu entsprechen, unabhängig von der darin enthaltenen Textmenge (Dies ist, wo es schwierig wird).

Ich habe eine funktionierende Version das tut, was ich bis die Menge an Text in dem zweiten Kind als die des Bildes drückt die Mutter div Breite breiten werden soll.

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 ein jsfiddle: http://jsfiddle.net/BmbAS/1/

Sie können sehen, wo es schief läuft, klicken der Link "Text verlängern/verkürzen", um den q zu erhöhen uantity Text

TLDR - ich möchte, dass alle divs die gleiche Breite sein, die der Breite des Bild gleich

ps. moderne Browser-Lösung nur notwendig

Answer 1

Siehe this edited version Ihres jsFiddle.

Hier ist, was auf die CSS hinzugefügt wird:

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

Answer 2

Wenn Sie bereit sind, ein wenig Javascript (jQuery in diesem Beispiel) zu verwenden, können Sie die Breite des Text div mit der Breite des Bildes einstellen könnte div.

Versuche $("#child2").css({'width': $('#child1').width()}); bis zum Ende des JS in Ihrer Geige hinzufügen oder die Gabel hier ansehen: http://jsfiddle.net/VXEMu/