这是我的代码：
<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.标题 with img。当然，我更喜欢这种方法，但我会一步一步地采取这种方法。
是否有一些 jquery 代码可以用来检测图像的宽度并将该宽度作为内联样式添加到标题标记中？
有一个更好的方法吗？我愿意接受建议。
你可以这样做：
$(window).load(function() {
$(".image p.caption").each(function() {
$(this).width($(this).siblings("img").width()).prependTo($(this).parent());
});
});
这也做了移动<p>之前<img>你要求的。
对于测试，您可以在此处查看工作演示 http://jsfiddle.net/6Utr4/1/.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
