Alignement dynamique <li>

Bonjour à tous,

Alors voilà, j'affiche actuellement une liste sous cette forme :

https://jsfiddle.net/70taxj06/

Ce que je voudrais c'est connaitre les modifications à apporter en css pour pouvoir avoir cet aspect :

https://www.autodraw.com/share/JIM74H3UM9PG

L'idée est de rajouter une nouvelle classe avec les règles css qui vont bien et chaque <li> se verra attribuer cette classe dynamiquement (ng-class en angular) selon la valeur de item[1]. L'idée étant bien évidemment d'aligner verticalement, et non horizontalement, une suite d'item ayant la même valeur item[1].

Merci d'avance.

r00t8

regarde plutôt vers display que float pour l'alignement vertical.

Ensuite je dirais de regrouper les éléments en colonne dans un conteneur distinct pour pouvoir les alignés selon ton croquis .

grid peut aussi etre utilisé en plaçant les éléments dans leur colonnes et lignes respectives sans devoir les regroupé par boites . ( exemple avec display:grid https://jsfiddle.net/70taxj06/1/ )
Modifié par gcyrillus (18 Oct 2017 - 17:09)