文章中的内嵌图像和标题 – 使标题的宽度符合图像的宽度

这是我的代码：

  
This is the image caption
  

这是我的CSS：

 .image { position: relative; float: right; margin: 8px 0 10px 10px; } .caption { font-weight: bold; color: #444666; } 

如上所述，标题将符合div.image的宽度。 我的问题通常是img大小不一，从100px宽到250px宽。 我想使标题宽度符合图像的相应宽度，无论大小。

虽然我也喜欢这个更加语义化，但我不确定用img切换p.caption是多么容易。 当然，我更喜欢这种方法，但我一步一步迈出这一步。

是否有一些jquery代码可用于检测图像的宽度并将该宽度作为内联样式添加到标题标记？

有一个更好的方法吗？ 我愿意接受建议。

Answer 1

你可以这样做：

 $(window).load(function() { $(".image p.caption").each(function() { $(this).width($(this).siblings("img").width()).prependTo($(this).parent()); }); }); 

这也会在您要求的之前移动

。

对于测试，您可以在此处查看工作演示 。