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

【问题标题】：Limit text to the width of sibling image / auto width in CSS将文本限制为同级图像的宽度/CSS中的自动宽度
【发布时间】：2010-10-11 16:04:36
【问题描述】：

我实际上是在尝试创建“figure”元素的一个版本（即将在 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 添加一个额外的样式。

感谢所有回答的人！

【问题讨论】：

设置div的宽度有什么问题？
我只是不认为这是好的代码。对于初学者来说，这意味着我正在复制宽度声明。如果我更改图像宽度，我也必须更改 div 宽度。（我知道它们只是彼此相邻。）不过下面有一个解决方案。

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

【讨论】：

我通常在图像上设置宽度/高度，因为它更适合浏览器渲染 - 页面加载时不会发生布局跳跃，并且在图像不可用时会保留布局。在这种情况下，我想我会在图像上设置一个高度，它会继承宽度。
另外 * 选择器是个坏主意。我可以在标题（例如链接）中有更多可能会搞砸的元素。它应该被简单地替换为img（duv 默认为 100%）
对 * 选择器的公平评论

【解决方案2】：

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

【讨论】：

【解决方案3】：

我遇到了同样的问题，在阅读了this 之后，我决定在周围元素上使用内联样式。对我来说似乎比使用表格更好。

【讨论】：

【解决方案4】：

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

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

这使得 div 表现得像一个表（Internet Explorer 不支持）。或者您可以使用表格而不是 div。我认为没有另一种自动设置宽度的方法。

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

【讨论】：

【解决方案5】：

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

【讨论】：