css - zmniejsz div jednostki nadrzędnej, aby dopasować szerokość jednego dziecka i ograniczyć szerokość drugiego dziecka

Question

Powiedzmy, że element div ma dwa elementy div, jeden zawierający tekst, a drugi zawierający obraz o znanej (ale zmiennej) szerokości & wysokość .

Chciałbym

• szerokość pierwszego dziecka div się kurczyć, aby pasowały do ​​szerokości obrazu (to mogę zrobić)
• div nadrzędnej (szerokości nieokreślony (zawierający obrazu)), aby zmniejszyć do rozmiaru div zawierającego obraz (to też jest w porządku)
• drugi element podrzędny zawierający tekst (również o nieokreślonej szerokości), który pasuje do szerokości div elementu nadrzędnego, niezależnie od ilości tekstu, który zawiera (to jest problematyczne.

Mam wersję roboczą, że robi to, co chcę aż ilości tekstu w drugiej dziecka popycha szerokość nadrzędnego div szerszy niż obraz.

Oto mój kod:

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> 

i oto jsfiddle: http://jsfiddle.net/BmbAS/1/

można zobaczyć, gdzie to się dzieje źle, klikając link "wydłuż/skróć tekst", aby zwiększyć q uantity tekstu

tldr - chcę wszystkie DIV być tej samej szerokości, która jest równa szerokości obrazu

ps. nowoczesne rozwiązanie przeglądarki konieczne tylko

Answer 1

Zobacz this edited version swojego jsFiddle.

Oto, co dodaje się do CSS:

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

Answer 2

Jeśli jesteś gotów użyć trochę JavaScript (jQuery w tym przykładzie), można ustawić szerokość div tekst do szerokości obrazu div.

spróbuj dodać $("#child2").css({'width': $('#child1').width()}); do końca JS w skrzypcach, lub sprawdzić widelec tutaj: http://jsfiddle.net/VXEMu/