Positionnement difficile...

Bonsoir,
J'ai besoin de vous pour m'aider à positionner 4 éléments que voici :

 	<p class="bloc-image">
	 	 	<a href="expositions/img/autres-expo/moncoutant.jpg">
	 	 	<img src="expositions/img/autres-expo/mmoncoutant.jpg" alt="Moncoutant" title="Cliquez pour agrandir" />
	 	 	</a>
	 	 	<span><strong>Moncoutant</strong> 2005</span>
	 	 	</p>
  			

  			<p class="bloc-image">
	 	 	<a href="expositions/img/autres-expo/forge.jpg">
	 	 	<img src="expositions/img/autres-expo/mforge.jpg" alt="Moncoutant" title="Cliquez pour agrandir" />
	 	 	</a>
	 	 	<span><strong>St Loup sur Thouet</strong> 2005</span>
	 	 	</p>
  			

  			<p class="bloc-image">
	 	 	<a href="expositions/img/autres-expo/rochelle.jpg">
	 	 	<img src="expositions/img/autres-expo/mrochelle.jpg" alt="Moncoutant" title="Cliquez pour agrandir" />
	 	 	</a>
	 	 	<span><strong>La Rochelle</strong> 2000</span>
	 	 	</p>
	 	 	

	 	 	<p class="bloc-image">
	 	 	<a href="expositions/img/autres-expo/chauray.jpg">
	 	 	<img src="expositions/img/autres-expo/mchauray.jpg" alt="Moncoutant" title="Cliquez pour agrandir" />
	 	 	</a>
	 	 	<span><strong>Chauray</strong> 2005</span>
	 	 	</p>				

Comme cela :


Sachant que j'ai déjà le code CSS suivant :

p.bloc-image {display: inline-block;text-align: center;}
p.bloc-image span {display:block;}

Pourriez vous m'aider ?

Bonsoir,

pour le positionnement de vos P il y table-qui fonctionne plutôt bien:

* {
	padding:0;
	margin:0;
}
#conteneur {
	display:table;
	width:100%
	margin:50px;
	border-collapse:separate;
	border-spacing:4px;
}
.bloc-image {
	display: table-cell;
	width:200px;
	height:400px;
	background-color: #693;	
}
.bloc-image1 {
	width:200px;
	background-color: #09C;	
	height:200px;
	margin-bottom:2px;
}

<div id="conteneur">
  <p class="bloc-image1"> </p>
  <p class="bloc-image1"></p>
  <p class="bloc-image"></p>
  <p class="bloc-image"></p>
</div>

Exemple

Je n'arrive pas à obtenir un résultat...

Voilà ce que j'ai :

<div id="conteneur">
 	 		<p class="bloc-image1">
	 	 	<a href="moncoutant.jpg">
	 	 	<img src="moncoutan.jpg" alt="Moncoutant" title="Cliquez pour agrandir" />
	 	 	</a>
	 	 	<span><strong>Moncoutant</strong> 2005</span>
	 	 	</p>
  			
  			<p class="bloc-image1">
	 	 	<a href="forge.jpg">
	 	 	<img src="mforge.jpg" alt="Moncoutant" title="Cliquez pour agrandir" />
	 	 	</a>
	 	 	<span><strong>St Loup sur Thouet</strong> 2005</span>
	 	 	</p>
  			
  			<p class="bloc-image">
	 	 	<a href="chauray.jpg">
	 	 	<img src="mchauray.jpg" alt="Moncoutant" title="Cliquez pour agrandir" />
	 	 	</a>
	 	 	<span><strong>Chauray</strong> 2005</span>
	 	 	</p>	  
	 	 	
  			<p class="bloc-image">
	 	 	<a href="rochelle.jpg">
	 	 	<img src="mrochelle.jpg" alt="Moncoutant" title="Cliquez pour agrandir" />
	 	 	</a>
	 	 	<span><strong>La Rochelle</strong> 2000</span>
	 	 	</p>
	 	 	

</div>

* {
	padding:0;
	margin:0;
}
#conteneur {
	display:table;
	width:55%;
	margin:50px;
	border-collapse:separate;
	border-spacing:20px;
}
.bloc-image {
	display: table-cell;
    text-align: center;
}
.bloc-image1 {
	width:300px;
	height:200px;
	margin-bottom:20px;
   text-align: center;
}
p.bloc-image span {
   display:block;
}

Il faut un vertical-align:bottom; pour les images (les grandes) placées avec table-cell

Ah super, merci beaucoup !

Vous pouvez le marquer en résolu.