Скажем, у родительского элемента div есть два дочерних элемента div, один из которых содержит текст, а другой содержит изображение известной (но переменной) ширины & рост.

мне бы хотелось

ширина первого дочернего (содержащего изображение) элемента div, чтобы уменьшить ширину изображения (это я могу сделать)родительский div (неопределенной ширины), чтобы уменьшить его до ширины div, содержащего изображение (это тоже нормально)текстовый второй дочерний элемент div (также не указанной ширины) для соответствия родительскому элементу div 's ширина независимо от количества текста, который он содержит (это где это становится хитрым).

У меня есть рабочая версия, которая делает то, что я хочудо тех пор количество текста во втором дочернем элементе выталкивает родительский div 's ширина шире, чем у изображения.

Вот'мой код:

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:

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

и здесь's jsfiddle:http://jsfiddle.net/BmbAS/1/

Вы можете увидеть, где это "идет не так, нажавудлинить / укоротить текст ссылка для увеличения количества текста

tldr - я хочу, чтобы все div были одинаковой ширины, равной ширине изображения

пс. необходимо только современное браузерное решение