如何使div与其兄弟一样宽但不宽？

Question

我有以下HTML：

<div class="wrapper">
  <div class="label">
    foor bar baz
  </div>
  <img src="...">
</div>

是的，我知道带有“label”类的div应该是一个标签。

简单的问题是：如何确保标签始终与图片一样宽，从不宽？ 图片的宽度和标签的内容是未知的。当标签的内容长于图像的宽度时，它应该断开到下一行。

现在，我为包装器提供了“display：inline-block”，当文本适合标签时，一切看起来都很好。但是，当文本较长时，它不会破坏，但会使标签长于图像。

我想这有一个简单的解决方案，但我只是没有看到它。 任何帮助表示赞赏！

Answer 1

一个元素不能大于它的父元素，所以如果你将img标记放在div中，它就永远不会更大。

<div class="wrapper">
  <div class="label">
    foor bar baz
    <img src="...">
  </div>
</div>

Answer 2

为两个元素赋予width:50%;（或宽度：49％;只是为了安全）属性，这应该可以解决问题。