说,父div有两个子div,一个包含文本,另一个包含已知(但可变)宽度&高度. @H_404_2@我想要

@H_404_2@>第一个孩子的宽度(image-containing)div缩小以适应图像的宽度(我可以这样做)
>父div(未指定宽度)缩小以适应包含图像的div的宽度(这也可以)
>包含文本的第二个子div(也是未指定的宽度),以匹配父div的宽度,而不管它包含的文本数量(这是它变得棘手的地方).

@H_404_2@我有一个工作版本,我想要的,直到第二个孩子的文本数量推动父div的宽度比图像的宽度.

@H_404_2@这是我的代码：

@H_404_2@CSS：

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

@H_404_2@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>

@H_404_2@这是一个jsfiddle：
http://jsfiddle.net/BmbAS/1/

@H_404_2@您可以通过点击“延长/缩短文本”链接来查看错误的位置,以增加文本数量

@H_404_2@tldr – 我希望所有的div都是与图像的宽度相同的宽度

@H_404_2@PS.现代浏览器解决方案只有必要

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