文章中的内联图像和标题 - 使标题的宽度与图像的宽度一致

发布于 2024-09-01 07:11:48 字数 666 浏览 7 评论 0原文

这是我的代码：

<div class="image">
<img src="image.jpg" alt="Image description" />
<p class="caption">This is the image caption</p>
</div>

这是我的 CSS：

.image {
position: relative;
float: right;
margin: 8px 0 10px 10px;
}

.caption {
font-weight: bold;
color: #444666;
}

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

虽然我也希望它更加语义化，但我不确定将 p.caption 与 img 切换起来有多容易。当然，我更喜欢这种方法，但我会一步一步地采取这种方法。

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

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

原文

Here's my code:

<div class="image">
<img src="image.jpg" alt="Image description" />
<p class="caption">This is the image caption</p>
</div>

Here's my CSS:

.image {
position: relative;
float: right;
margin: 8px 0 10px 10px;
}

.caption {
font-weight: bold;
color: #444666;
}

As is above, the caption will conform to the width of div.image. My problem is often the img varies in size, from 100px width to 250px width. I'd like to make the caption width conform to the corresponding width of the image, no matter the size.

While I'd love for this to be more semantic as well, I'm not sure how easy it would be to switch p.caption with img. Of course, I'd prefer that method but am taking this a step at a time.

Is there some jquery code that I can use to detect the width of the image and add that width as an inline style to the caption tag?

Is there a better way to do this? I'm open to suggestions.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

江湖正好 2024-09-08 07:11:48

您可以执行以下操作：

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

这还会将

移动到您要求的之前。

为了进行测试，您可以在此处查看工作演示。

You can do something like this:

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

This also does the moving of <p> before the <img> which you asked for.

For testing, you can see a working demo here.

回复收藏 0 原文

~没有更多了~