如何使图片标题的宽度与图片相同？现在我有以下代码：
<div class="image">
<img src="foo.jpg" alt="" />
<div>This is the caption.</div>
</div>
我尝试了很多东西（浮动、绝对定位等），但如果标题很长，它总是会使 div 变宽而不是多行。问题是我不知道图像的宽度（或标题的长度）。是解决这个使用表的唯一方法吗？
【问题讨论】：
标签： html css image width caption
如果问题是标题太长，您可以随时使用
div.image {
width: 200px; /* the width you want */
max-width: 200px; /* same as above */
}
div.image div {
width: 100%;
}
并且标题将保持不变。另外，标签名称是 img，而不是 image。
或者，如果你想检测你的图像宽度，你可以使用 jQuery：
$(document).ready(function() {
var imgWidth = $('.image img').width();
$('.image div').css({width: imgWidth});
});这样，您将获得图像宽度，然后将标题宽度设置为它。
【讨论】：
您可以尝试设置图像 div 包装器display:inline-block
http://jsfiddle.net/steweb/98Xvr/
如果标题很长，唯一的解决办法就是设置一个固定的宽度，或者通过js设置.image div的宽度。我正在尝试考虑一个纯 css 解决方案，但我认为这是一个艰巨的挑战 :)
【讨论】：
您可以应用display:table; 和任意初始宽度，例如。 width:7px; 到 figure 这样的父块，一切都会按预期工作！
这是一个现场演示： http://jsfiddle.net/blaker/8snwd/
此解决方案的限制是 IE 7 及更早版本不支持 display:table;，而 IE 8 要求您的文档类型为 !DOCTYPE。
来源：
【讨论】：
所以问题是你不知道img会有多宽，而且img的caption可能会超过img的宽度，这种情况下你想将caption的宽度限制为图片。
就我而言，我在父元素上应用了display:table，并在标题元素上应用了display:table-caption 和caption-side:bottom，如下所示：
<div class="image" style="display:table;">
<img src="foo.jpg" alt="" />
<div style="display:table-caption;caption-side:bottom;">This is the caption.</div>
</div>
【讨论】：
关键是将图像视为具有一定宽度或长度。在下面的示例中，我检查了我的图像是 200px 宽。然后将标题视为内联块。
HTML：
<div style="width:200px;">
<img src="anImage.png" alt="Image description"/>
<div class="caption">This can be as long as you want.</div>
</div>
CSS：
.caption {
display: inline-block;
}
您还可以将 inline-block 替换为左对齐、右对齐或拉伸到确切图像宽度的文本，方法是将上面的 css 替换为以下内容之一：
.caption {
/* text-align: left; */
/* text-align: right; */
text-align: justify;
}
【讨论】：
正确添加字幕的唯一方法是将图像和字幕包含在由 span 元素构成的表格中，该元素具有 table、table-row 和 table-cell css 属性。
任何其他方法（包括 HTML5 图形标签）要么导致宽度不匹配，要么导致不必要的换行。
如果您的方法必须在非 css3 浏览器中工作，那么表格可能是最好的选择。
【讨论】：