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方式可以将文本包含在与图像一样宽的范围内，如果它变长则会换行？

这是问题的小提琴 - ＆gt; http://jsfiddle.net/qRGM5/

Answer 1

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

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

<强>更新

No-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>

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

2 个答案: