Question

这是我的代码：

<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 大小不一，从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());
  });
});

这也会在您要求的<p>之前移动<img>。

For testing, you can see a working demo here

文章中的内嵌图像和标题 - 符合图片宽度与图像宽度的标题

1 个答案: