css - 如何在具有动态大小图像的容器中包含文本？

Question

考虑这个html：

<div>
<a href="#" title="image"><img src="http://s9.postimg.org/lqikvh05r/black_shirt.jpg" /></a>
<h3>Some text here but if this gets long it will pass the image and not wrap</h3>
</div>

因此，在不提前知道图像大小的情况下，是否有一种 CSS 方法可以将文本包含到与图像一样宽并在它变长时换行？

这是问题的一个小提琴-> http://jsfiddle.net/qRGM5/

Answer 1

嗯，我不知道 CSS 是否有解决方法，但您可以尝试使用 Javascript（使用 jQuery）：

$(document).ready(function(){
    $('div').css('width', $('img').width()+'px');
});

更新：

无 javascript 解决方法（您将需要图像宽度）：

<div style="display: inline-block; border: 1px solid red;">
    <a href="#" title="image"><img src="http://s9.postimg.org/lqikvh05r/black_shirt.jpg" /></a>
    <h3 style="width: 300px;">Some text here but what if this text gets really long and passed the image</h3>
</div>

Answer 2

我知道它可能很明显，也许不是你要找的。但如果您愿意在图像上设置最大宽度，它会起作用。

#picture img {
max-width:100px;
}
#picture {
max-width:100px;
}
#text{
max-width:inherit;
}

<div id="picture">
<a href="#" title="image">
<img src="http://s9.postimg.org/lqikvh05r/black_shirt.jpg"     /></a>
<h3><div id="text" >Some text here but if this gets long
 it will pass the image and not wrap</div></h3>