将文本限制为同级图像的宽度/CSS 中的自动宽度

Question

我本质上是在尝试创建一个版本的“图形”元素（即将在 HTML5 中出现），由此我有一张图片，下面有一个简短的描述。

但是，我想将整个元素的宽度限制为图像的宽度，因此文本不会比图像宽（必要时换行）。

基本的HTML：

 <div class="figure">
<img src="..." alt="..." width="..." height="..." /><br />
A description for the image
</div>

我精通 CSS，但我想不出任何纯 CSS 解决方案，如果不将 style="width:100px" 添加到 div 以匹配图像宽度。

更新：经过一番搜索和思考，最好的方法似乎是在 div 上使用内联宽度。我将保留图像的宽度属性，以防我希望 div 比图像宽一点（例如容纳更长的标题）。

这种方法还意味着我可以并排放置两张图片，并在下方添加标题。如果我有一组相同大小的图像，我当然可以为每个 div 添加额外的样式。

感谢所有回答的人！

原文由 DisgruntledGoat 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

样式表

div.figure img,
div.figure div.caption {
    width: 100%;
}
div.figure div {
    overflow: hidden;
    white-space: nowrap;
}

注意：要启用换行，只需删除最后一行 CSS

HTML

 <div class="figure" style="width:150px;">
    <img src="logo.png" alt="logo" />
    <div class="caption">A description for the image</div>
</div>

我已经在 Chrome、Firefox 和 IE7 中检查过它，它在所有三个中看起来都不错。我意识到这在 div 而不是 img 上有宽度，但至少你只需要在一个地方设置宽度。如果不使用 css-expressions（仅限 IE），我看不到将外部 div 宽度设置为第一个子元素宽度的方法。

原文由 Antony Scott 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这也可以使用 'display: table-caption' 作为标题来完成，如下所示：

HTML

 <div class="wrapper">
  <img src="image.jpg" />
  <div class="caption">My caption...</div>
</div>

样式表

.wrapper {
  display: table;
}

.caption {
  display: table-caption;
  caption-side: bottom;
}

此块也可以在其他文本的左侧浮动。我已经在 IE8+ 中测试过了。这是一个 JSBin 示例：http: //jsbin.com/xiyevovelixu/1

原文由 Hedley Smith 发布，翻译遵循 CC BY-SA 3.0 许可协议