相关疑难解决方法(0)

情况是我有一个img,我想要一个pop-over标题框,其宽度是img的宽度.我不能将标题添加为img的子项,因为img标签不带孩子.因此我的想法是这样的:

<div>
   <img/>
   <div>
      ...caption...
   <div>
</div>

问题是外部div扩展以填充其父级的宽度,就像块元素一样,因此caption-div变得同样宽,我得到的东西看起来像这样:

如果外部div成为页面的宽度,则标题遵循外部div的宽度,从而伸出图像.

我不想手动设置外部div的宽度,因为我在整个站点上使用此子模板来显示所有形状和大小的图像.反正有没有让外部拥抱图像,而不是填补他的父母？

在图像下方添加标题的最佳方法是什么？图像及其标题将向右浮动,标题上的文字需要换行 - 一个200x200px的图像不应该有宽度为800px的标题.

我非常喜欢一种允许我更新图像(具有不同宽度)而无需更改CSS或标记的解决方案.

由于我无法控制的原因,图像本身也会浮动,但这不应该太成问题.

图像代码是

<div class="floatright">
  <img alt="foo" src="bar.png" height="490" border="0" width="800">
</div>

我可以根据需要用HTML/CSS包装它.这个页面上没有JS.