Eléments et flottant et "lignes"

Bonjour,

Tout d'abord je suis plus codeur que webdesigner et donc il m'arrive parfois de bloquer sur les CSS.

Je reprends un site sous Wordpress dont la page d'accueil affiche les articles sous forme de "float", chacun d'eux pouvant s'afficher sur l'équivalent d'une ou 2 colonnes.
Ce dernier paramètre est défini via une class col1 ou col2 (suivant l'id de l'article).

Mon problème se voit sur la capture ci-dessous :
https://www.dropbox.com/s/gg3vj05z1p7ld1w/Capture%20d%27%C3%A9cran%202016-03-25%2016.25.30.png?dl=0

Le 4è article ici en noir ne vient pas se sous le 1er article orange mais à côté. Comment faire pour qu'il aille "à la ligne" ? Je ne peux me baser sur le nombre d'articles par ligne puisque cela peut changer en fonction de la résolution de l'écran.

Merci

salut,
il aurait peut être fallu plutôt envoyer ton code. Mais je pense qu'en passant par un display: inline-block tu peux arriver au résultat que tu souhaites.

Ca m'est un peu délicat car c'est un site en prod.

Je vais essayer ta technique, sinon je vient de tenter :nth-child(an+b) et c'est pas mal

Il y a plusieurs techniques possibles. De manière non exhaustive :
- display:block + float:left sur les éléments, avec un display:table sur l'élément parent pour éviter de sortir les éléments du flux,
- display:inline-block, mais attention à la gestion des espaces indésirables,
- la solution flexbox, la plus "in" du moment (exemple).

Quoi qu'il en soit, en développant des layouts de site vous rencontrerez ce problème de manière récurrente. Il faudrait apprendre à utiliser un système de grilles, soit en le développant par vous-même, soit en utilisant un framework html/css (Bootstrap, Knacss, etc).
Modifié par Olivier C (26 Mar 2016 - 03:24)