代码之家  ›  专栏  ›  技术社区  ›  Manuel Meurer

如何使一个DIV像它的兄弟一样宽,但不宽?

  •  1
  • Manuel Meurer  · 技术社区  · 15 年前

    我有以下HTML:

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

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

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

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

    我想有一个简单的解决办法,但我没有看到。

    2 回复  |  直到 15 年前
        1
  •  2
  •   Catfish    15 年前

    元素不能大于其父元素,因此如果将img标记放在DIV中,它将永远不会变大。

    <div class="wrapper">
      <div class="label">
        foor bar baz
        <img src="...">
      </div>
    </div>
    
        2
  •  1
  •   DaClown    15 年前

    width:50%; (或者宽度:49%;,为了安全起见)属性,应该这样做。