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

Question

我实际上是在尝试创建“图形”元素的一个版本(即将在 HTML5 中推出)，借此我有一张图片，下面有简短的描述。

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

基本 HTML:

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

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

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

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

感谢所有回答的人!

Answer 1

这也可以使用 '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;
}

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