Discussion :

[Darkaurora]

Bonjour, je construit une page qui permet à un utilisateur d'ajouter/supprimer des blocs en JS, je souhaite positionner des blocs les uns à la suite des autres mais avec quelques règles tout de même:
1- Au maximum 3 éléments par ligne.
2- Les contenus peuvent être de taille différentes (hauteur) et je souhaite que le flux soit tabulaire (à la manière de la propriété display: table-cell).

J'arrive à présenter l'information mais sur une seule ligne comme présenté sur ce site http://www.creativejuiz.fr/blog/css-...hauteur-en-css.
J'aimerais la même chose mais en faisant en sorte qu'une ligne ne contienne qu'au maximum 3 éléments et que l'ajout d'élément force le reflow sur une nouvelle ligne.

Y a t il une solution ?

D'avance merci, DarkAurora.

[ryan]

Yop!

Je suppose que tes blocs sont dans un conteneur. Si oui, tu devrais peut-être donner une largeur maximale ( max-width ) à ce conteneur, en calculant pour avoir 3 blocs par lignes, avec les marges éventuelles

[Darkaurora]

C'est vrai que j'i du mal a exprimer le problème en fait j'arrive a afficher 3 élément max par ligne le truc c'est que j'ai des résultats étrange lorsque j'ai six blocs de hauteur différentes. Je devrais en avoir 3 par ligne avec un conteneur de width 100% mes blocs en float left et width 33.333% concrètement mon 4eme block va se positionner sous la 3eme a cause de la hauteur de la deuxième et seule la 5 et 6eme vont se positionner "normalement à la ligne".

[johnrock]

Bonjour,
Poste le code de ta page pour que nous puissions mieux comprendre. Ou, met le 4e bloc en dessus des premiers blocs, si tu as utilisé pour les premiers la propriété float

[ryan]

Yop!

Introduire un clear:both après le 3eme bloc?

[patrotot]

Bonjour,
Si les blocs ont des hauteurs différentes, cela va jouer sur leur positionnement non ?
Pour que leur taille n'affecte pas il faudrait que le conteneur qui englobe les 3 blocs soit d'une hauteur fixe égale à la hauteur maximale que peut prendre un bloc.
Mais tu risque d'avoir de l'espace entre chaque ligne de bloc de cette façon.
La manière de corriger le problème serait de connaitre3 la hauteur maximale du plus grand des trois blocs et de donner automatiquement (javascript) cette valeur à la hauteur du conteur.

Ou peut-être qu'en CSS il n'a pas besoin de javascript je ne sais pas.