內嵌圖片和文章標題 - 符合標題的寬度圖像的寬度

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。我的問題往往是大小不一，從100px寬度到250px寬度。我想讓標題寬度符合圖片的相應寬度，不管大小如何。

雖然我很想爲這是更多的語義爲好，我不知道這將是多麼容易切換p.caption與IMG。當然，我更喜歡這種方法，但我一次只採取這一步驟。

是否有一些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。