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

时间:2010-06-28 21:03:11

标签: css width

我有以下HTML:

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

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

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

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

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

2 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:1)

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