我有以下HTML:
<div class="wrapper">
<div class="label">
foor bar baz
</div>
<img src="...">
</div>
是的,我知道带有“label”类的div应该是一个标签。
简单的问题是:如何确保标签始终与图片一样宽,从不宽? 图片的宽度和标签的内容是未知的。当标签的内容长于图像的宽度时,它应该断开到下一行。
现在,我为包装器提供了“display:inline-block”,当文本适合标签时,一切看起来都很好。但是,当文本较长时,它不会破坏,但会使标签长于图像。
我想这有一个简单的解决方案,但我只是没有看到它。 任何帮助表示赞赏!
答案 0 :(得分:2)
一个元素不能大于它的父元素,所以如果你将img标记放在div中,它就永远不会更大。
<div class="wrapper">
<div class="label">
foor bar baz
<img src="...">
</div>
</div>
答案 1 :(得分:1)
为两个元素赋予width:50%;
(或宽度:49%;只是为了安全)属性,这应该可以解决问题。