Problème d'alignement de mes box

Bonjour, j'ai quatre box par ligne et je voudrais que la 5éme box et les trois suivantes s'affichent en dessous de la première ligne de box et ainsi de suite.

Quelle est la syntaxe pour faire ça ?

Je vous mets l'adresse car je ne sais pas trop comment expliquer ça convenablement. Vous aurez ainsi accès au code source

http://bugposts.blogspot.fr/

Si vous avez des questions, n'hésitez pas, je serais ravi de vous répondre.

Maj - pour donner un exemple concret, la 5ème box qui contient "Titre article 5" passe en dessous de la 3ème box "Titre article 3", ce que je voudrais c'est que la 5ème box s'aligne verticalement avec la 1ère box, la 6ème box avec la 2ème, la 7ème avec la 3ème, etc...

En vous remerciant par avance.
Modifié par misterclass (20 Aug 2016 - 20:25)

130 lectures et pas une réponse
Suis-je dans la bonne section ?
Merci

Hello,

Etant donné que tu joues avec les float, tu dois aussi jouer avec les clearfix pour avoir le rendu que tu veux.

Donc la règle suivante devrait fonctionner :

.date-outer:nth-child(n+5) {
	clear: both;
}

!!! Sauf que : tes postes n'ont pas tous la même structure. Tous les <div> .date-outer possède un seul article mais il y en a un qui en possède deux...

Tout d'abord merci pour votre contribution

J'ai analysé le code source et je ne trouve pas ce dont quoi vous faites allusion. Sinon, j'ai essayé votre méthode qui malheureusement ne fonctionne pas. Cependant, ça m'a donné une petite idée. Dans le code javascript ci-dessous, j'ai introduit la condition suivante :

if (postCount==5 || postCount==9){
el.style.clear = "both";
}

<script type='text/javascript'>
/*!
 * Ray Herro
 *  http://www.freebloggertemplate.info/
 
 * Copyright 2011, Free Blogger Templates
 * Date: Thu Oct 13 2011
 */
postCount=postCount+1;
if (postCount==1){
var el = document.getElementById(&quot;postfirst<data:post.id/>&quot;);
el.style.width = &quot;228px&quot;;
el.style.height = &quot;auto&quot;;
el.style.cssFloat = &quot;left&quot;;
el.style.styleFloat = &quot;left&quot;;
el.style.margin = &quot;3px 0 6px 6px&quot;;
el.style.overflow = &quot;hidden&quot;;
el.style.background = &quot;#f7f7f7&quot;;
el.style.border = &quot;0.1em solid #f6f6f6&quot;;
el.style[&#39;-moz-box-shadow&#39;] = &quot;-1px -2px 3px -2px rgba(106,106,106,0.3), 1px 2px 2px rgba(106,106,106,0.3)&quot;;
el.style[&#39;-webkit-box-shadow&#39;] = &quot;-1px -2px 3px -2px rgba(106,106,106,0.3), 1px 2px 2px rgba(106,106,106,0.3)&quot;;
el.style.boxShadow = &quot;-1px -2px 3px -2px rgba(106,106,106,0.3), 1px 2px 2px rgba(106,106,106,0.3)&quot;;
el.style[&#39;filter&#39;] = &quot;progid:DXImageTransform.Microsoft.Shadow(Color=#d4d4d4, Strength=2, Direction=0), progid:DXImageTransform.Microsoft.Shadow(Color=#d4d4d4, Strength=2, Direction=90), progid:DXImageTransform.Microsoft.Shadow(Color=#d4d4d4, Strength=3, Direction=180), progid:DXImageTransform.Microsoft.Shadow(Color=#d4d4d4, Strength=1, Direction=270);&quot;
}
if (postCount&gt;=2){
var el = document.getElementById(&quot;postfirst<data:post.id/>&quot;);
el.style.width = &quot;228px&quot;;
el.style.height = &quot;auto&quot;;
el.style.cssFloat = &quot;left&quot;;
el.style.styleFloat = &quot;left&quot;;
el.style.margin = &quot;3px 0 6px 6px&quot;;
el.style.overflow = &quot;hidden&quot;;
el.style.background = &quot;#f7f7f7&quot;;
el.style.border = &quot;0.1em solid #f6f6f6&quot;;
el.style[&#39;-moz-box-shadow&#39;] = &quot;-1px -2px 3px -2px rgba(106,106,106,0.3), 1px 2px 2px rgba(106,106,106,0.3)&quot;;
el.style[&#39;-webkit-box-shadow&#39;] = &quot;-1px -2px 3px -2px rgba(106,106,106,0.3), 1px 2px 2px rgba(106,106,106,0.3)&quot;;
el.style.boxShadow = &quot;-1px -2px 3px -2px rgba(106,106,106,0.3), 1px 2px 2px rgba(106,106,106,0.3)&quot;;
el.style[&#39;filter&#39;] = &quot;progid:DXImageTransform.Microsoft.Shadow(Color=#d4d4d4, Strength=2, Direction=0), progid:DXImageTransform.Microsoft.Shadow(Color=#d4d4d4, Strength=2, Direction=90), progid:DXImageTransform.Microsoft.Shadow(Color=#d4d4d4, Strength=3, Direction=180), progid:DXImageTransform.Microsoft.Shadow(Color=#d4d4d4, Strength=1, Direction=270);&quot;
}
if (postCount==5 || postCount==9){
el.style.clear = &quot;both&quot;;
}
</script>

Ça vaut ce que ça vaut, mais en tout cas c'est peut-être un début de piste...
La box "titre article 5" se retrouve bien sous la box "titre artice 1" mais le hic c'est que je la voudrais juste en dessous pas si éloigné verticalement comme c'est le cas ici. Même chose avec les autres box, etc...

Concrètement, je souhaiterais une mise en page de cette manière : http://infinite-btemplates.blogspot.fr/
Modifié par misterclass (22 Aug 2016 - 13:49)

Ok, regarde les plugins qui font ça en JS alors...
http://masonry.desandro.com/, http://isotope.metafizzy.co/, ....

Je pense que tu trouveras ton bonheur

J'ai regardé les plugins que tu me proposes et pour être honnête je n'y comprends pas grand chose.

Je suppose qu'il faut que j'intègre ça dans mon html mais je ne sais pas comment m'y prendre.

Si je prends celui de Masonry, de ce que j'ai compris, pour installer le plugin, j'ai le choix entre télécharger le script et le mettre en dur dans mon code, de copier directement l'adresse url du script ou de faire l'installation sous forme de package. Ensuite, pour l'initialisation du script, 3 choix s'offrent à moi : par jquery, par vanilla ou par html.

Mais est-ce que je dois changer le nom des class de mes div pour les renommer en grid, grid-item, grid-item grid-item--width2 ?

Un peu de précision ne serait pas de refus, je suis un novice.

Merci
Modifié par misterclass (22 Aug 2016 - 15:13)