Margin-top d'un img changeant selon la hauteur d'un div

Bonjour à tous,

Je me suis inscrit aujourd'hui sur le forum et voici ma première question.

Voici mon code source :

<div class="liste articles sommaire">
	<a name='pagination_articles' id='pagination_articles'></a>
	<ul class="liste-items">
		
		<li class="item hentry logo280">
	<div class="surtitre">Samedi 28 avril 2012 14h30</div>
	<h3 class="h3 entry-title"><a href="##" rel="bookmark"><img class='spip_logos' alt="" src="IMG/rubon49.jpg" width='280' height='265' style='height:265px;width:280px;' />Assemblée Générale 2012 de didattica </a></h3>
	<div class="soustitre">à l&#8217;Ecole Nationale Supérieure d&#8217;Architecture de Paris La Villette</div>
	<div class="introduction entry-content">
<p>[bla bla bla bla]</p>
</div>
	<div class="meta-publi">
	<a class="lire-la-suite" href="##">Lire la suite<span class="lire-la-suite-titre"> de  <em>Assemblée Générale 2012 de didattica </em></span></a>
	</div>
</li>
		<li class="item hentry logo280">
	<div class="surtitre">à l&#8217;occasion de la parution du livre-film  "Rroms&nbsp;: politique du territoire"</div>
	<h3 class="h3 entry-title"><a href="##" rel="bookmark"><img class='spip_logos' alt="" src="IMG/arton188.jpg" width='280' height='280' style='height:280px;width:280px;' />Rencontre-discussion avec Adam Bartosz et Marcel Courthiade</a></h3>
	<div class="soustitre">Lundi 2 avril 2012 18h30, Maison de l&#8217;Europe en partenariat avec l&#8217;Institut Polonais</div>
	<div class="introduction entry-content">
<p>[bla bla bla bla]</p>
</div>
	<div class="meta-publi">
	<a class="lire-la-suite" href="##">Lire la suite<span class="lire-la-suite-titre"> de  <em>Rencontre-discussion avec Adam Bartosz et Marcel Courthiade</em></span></a>
	</div>
</li>
		<li class="item hentry logo160">
	<div class="surtitre">Filmage et tenue d&#8217;un stand par didattica</div>
	<h3 class="h3 entry-title"><a href="##" rel="bookmark"><img class='spip_logos' alt="" src="IMG/rubon26.jpg" width='160' height='152' style='height:152px;width:160px;' />LES RROMS EN FRANCE ET EN EUROPE, évènement organisé par l&#8217;association Ternikano Berno</a></h3>
	<div class="soustitre">Dimanche 19 Février 2012, Sevran (93)</div>
	<div class="introduction entry-content">
<p>[bla bla bla bla]</p>
</div>
	<div class="meta-publi">
	<a class="lire-la-suite" href="##">Lire la suite<span class="lire-la-suite-titre"> de  <em>LES RROMS EN FRANCE ET EN EUROPE, évènement organisé par l&#8217;association Ternikano Berno</em></span></a>
	</div>
</li>
</ul>
</div>

Avec ce code, je voudrais que chaque .spip_logos ait un margin-top dépendant de la hauteur de div.surtitre se trouvant juste au dessus de lui…

Comment puis-je procéder en jQuery ?

Merci pour votre aide.

Bon… A tâtons, voici mon résultat, ça pourrait aider d'autres personnes :

<script type="text/javascript">
$("document").ready(function()
	{
		$(".articles .liste-items .item .surtitre").each(function()
			{
				gHauteurSurtitre = $(this).height();
				$(this).next().contents().find("img").css("margin-top","-" + gHauteurSurtitre + "px");
			}
		);
	}
);
</script>

Avec ce code, mon img.surtitre sera toujours aligné avec div.surtitre quelque soit la hauteur de ce dernier. Et cela permet de ne pas enlever img.surtitre mon "h3 a".

Amicalement.