[Résolu] Utilisation de nth-child

Bonjour à toutes et à tous,

J'essai d'utiliser la balise nth-child pour un site de gallerie, mais je galère un peu. En gros, je souhaite afficher 3 div par ligne, et compenser les marges de tout les premiers et derniers éléments afin d'utiliser toute la largeur.

Malheureusement, le dernier élément n'a pas l'air de souhaiter s'aligner. La marge est bonne et il est bien à droite, mais il est trop bas.

Voici un screen:
http://cl.ly/FX90

Voici le CSS:

#post {
	width: 960px;
	display: inline;
}

.post-excerpt:nth-child(3n+1) {
	margin-right: 30px;
	float: left;
}

.post-excerpt {
	width: 300px;
	margin-bottom: 50px;
	padding: 0;
	overflow: hidden;
}

.post-excerpt:nth-child(3n) {
	margin-left: 30px;
	float: right;
}

Voici le HTML:

<section id="post">
		<article class="post-excerpt">
			<a href="#"><img src="http://lorempixel.com/300/200/" class="post-excerpt-image"></a>
			<h2><a href="#">Post title 1</a></h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor.</p>
		</article>
		<article class="post-excerpt">
			<a href="#"><img src="http://lorempixel.com/300/200/" class="post-excerpt-image"></a>
			<h2><a href="#">Post title 2</a></h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor.</p>
		</article>
		<article class="post-excerpt">
			<a href="#"><img src="http://lorempixel.com/300/200/" class="post-excerpt-image"></a>
			<h2><a href="#">Post title 3</a></h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor.</p>
		</article>
	</section>

Merci d'avance de votre aide et de vos conseils.

Salut,

Enlève tes float à .post-excerpt:nth-child(..) et donne à ta classe .post-excerpt la propriété display:inline-block.

Ça garde tes éléments dans le flux et permet de résoudre ton problème.
Modifié par Xulu (03 Apr 2012 - 20:23)

Merci, ça march bien, mais il m'a fallu réajuster mes marges.

Encore merci.