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

这是我的代码:

Image description

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代码可用于检测图像的宽度并将该宽度作为内联样式添加到标题标记?

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

    你可以这样做:

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

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

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

    需要了解更多jQuery教程分享文章中的内嵌图像和标题 – 使标题的宽度符合图像的宽度,都可以关注jQuery技术分享栏目—计算机技术网(www.ctvol.com)!

      以上就是jQuery教程分享文章中的内嵌图像和标题 – 使标题的宽度符合图像的宽度相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。

      本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。

      ctvol管理联系方式QQ:251552304

      本文章地址:https://www.ctvol.com/jquerytutorial/982464.html

      (0)
      上一篇 2021年12月13日
      下一篇 2021年12月13日

      精彩推荐