images en ligne et la légende à l'article - sont conformes à la largeur de légende à la largeur de l'image

Question

Voici mon code:

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

Voici mon CSS:

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

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

Comme ci-dessus, la légende se conformeront à la largeur div.image. Mon problème est souvent le img varie en taille, de 100px largeur à 250px largeur. Je voudrais que la largeur de la légende soit conforme à la largeur correspondante de l'image, peu importe la taille.

Alors que j'aimerais pour que cela soit plus sémantique aussi bien, je ne sais pas comment il serait facile de changer p.caption avec img. Bien sûr, je préférerais cette méthode, mais je prends cette étape à la fois.

Existe-t-il un code jquery que je peux utiliser pour détecter la largeur de l'image et ajouter cette largeur en tant que style en ligne à la balise de légende?

Y a-t-il une meilleure façon de procéder? Je suis ouvert aux suggestions.

Answer 1

Vous pouvez faire quelque chose comme ceci:

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

Cela fait aussi le déplacement de <p> avant la <img> que vous avez demandé.

For testing, you can see a working demo here.