3
Indiquez l’intérêt que vous portez à cette question
0

Boucle article en trois colonnes, qui se répète dans une boucle

Bonjour à tous,

Je cherche depuis plusieurs semaine une solution...
Mon titre n’est pas explicite du tout, je ne sais pas où chercher.

Pour un site je fait un programme, chaque rubrique est une journée et chaque article un horaire.

J’ai fait un schéma pour que se soit plus claire.

Il faut cliquer ici

Pour une journée je me retrouve a devoir classer mes articles (3/ 7 / 9 ... c’est toujours différents), 3 articles par ligne, puis 4 etc
(exemple 2)
Le problème est que chaque article a une hauteur différente, donc parfois le 4e article ne se place pas sous le premier. (exemple 2)

Donc, je souhaiterai que le conteneur de la rubrique se répète tout les 3 articles. Comme ça la hauteur de l’article est pris en compte, et le reste se place correctement. (exemple 3)

Est-ce une question de boucle ? de critère, ou de css3 ?

Pour le moment, je bricole, je choisie la hauteur de l’article le plus long que j’applique à tous, mais faut ajuster via FTP pour chaque dimension de l’écran, et parfois on a pas besoin d’autant de hauteur.

Je précise que je ne recherche pas l’effet Masonry, pas pratique du tout dans une logique de classement chronologique strict.

Un exemple sur le site
Mon code en question :

<div class="contenu_programme">
<BOUCLE_mot_mobile2(MOTS){id_rubrique}{tout}>
<BOUCLE_article_programme (ARTICLES){id_mot}{par date}{tout} >


<div class="vignette_programme">

<div class="bloc">
<div class="heure_lieu">
<h3 class="fine"><span class="heure">#TITRE</span></h3>
<BOUCLE_mots(RUBRIQUES){id_rubrique}{tout}>
<h3 class="fine"><span class="date">#TITRE</span></h3>
</BOUCLE_mots>
</div>

<div class="chapo">#CHAPO</div>
<div class="texte">#TEXTE</div>

<div class="mot_cle">
<BOUCLE_gr(GROUPES_MOTS){id_groupe=3}>
<b>#TITRE</b> <mark><b> / </b></mark>
<BOUCLE_mot_mobile(MOTS){id_article} {id_groupe !IN 2,1}>
<BOUCLE_mobile(ARTICLES){id_mot}{id_rubrique=7}{par date}{lang}{inverse}>
<a href="#URL_ARTICLE#ancre_invite">#TITRE #SOUSTITRE</a> <mark> <b>,</b> </mark>
</BOUCLE_mobile>
</BOUCLE_mot_mobile>

</BOUCLE_gr>

</div>
<span class="point"></span>
</div>

</div>
</BOUCLE_article_programme>
</BOUCLE_mot_mobile2>

</div>