我本质上是在尝试创建一个"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.
感谢所有回答的人!