Question

我本质上是在尝试创建一个“figure”元素的版本（即将在HTML5中发布），我在其下面有一个简短描述的图像。

但是，我想将整个元素的宽度限制为图像的宽度，因此文本不会比图像宽（如果需要，可以包装到多行）。

基本HTML：

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

我非常精通CSS，但我没有考虑任何纯CSS解决方案，只是在style="width:100px"添加div以匹配图像宽度。

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

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

感谢所有回答的人！

Answer 1

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

<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

Answer 2

要设置宽度以自动匹配图像，您可以使用

.figure {
  display: table;
  width: 1px;
}

这使得div的行为类似于表（Internet Explorer中不支持）。或者您可以使用表而不是div。我认为没有其他方法可以自动设置宽度。

编辑：最简单的方法是忘记自动宽度并手动设置。如果确实需要，您可以使用JavaScript或表格。在这种情况下，使用表并不是那么难看，因为您正在解决HTML版本的限制。在服务器端脚本的情况下，您还可以在生成页面时设置宽度。

Answer 3

<强>样式表

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表达式（仅限IE），我看不到将外部divs宽度设置为第一个子元素宽度的方法。

Answer 4

我有同样的问题，在阅读this后决定在周围元素上使用内联样式。似乎比使用表格更好的解决方案。

Answer 5

您可以将display:table解决方案用于所有其他浏览器，将CSS Behaviour用于Internet Explorer。