我本质上是试图创建一个“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添加一个额外的风格。
感谢所有回答的人！
解决方法
样式表
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宽度设置为第一个子元素的宽度的方法。
