说,父div有两个子div,一个包含文本,另一个包含已知(但可变)宽度&高度.
我想要
>第一个孩子的宽度(image-containing)div缩小以适应图像的宽度(我可以这样做)
>父div(未指定宽度)缩小以适应包含图像的div的宽度(这也可以)
>包含文本的第二个子div(也是未指定的宽度),以匹配父div的宽度,而不管它包含的文本数量(这是它变得棘手的地方).
我有一个工作版本,我想要的,直到第二个孩子的文本数量推动父div的宽度比图像的宽度.
这是我的代码：
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>
这是一个jsfiddle：
http://jsfiddle.net/BmbAS/1/
您可以通过点击“延长/缩短文本”链接来查看错误的位置,以增加文本数量
tldr – 我希望所有的div都是与图像的宽度相同的宽度
PS.现代浏览器解决方案只有必要
解决方法
看到你的jsFiddle的
this edited version.
#container {
display: table-cell;
}
#child1 {
display: table-row;
width: 1px;
}
#child2 {
display: table-cell;
width: 1px;
}
