Pas si simple: 2col en li chcun de hauteur variable

Bonjour,

Je constate que malgré l'expérience on trouve toujours une merdouille :

Y a t-il une moyen sans js pour que une liste s'affiche sur 2 colonnes. (facile ils sont en float)

MAIS dont chaque chaque li a une hauteur quelconque (et donc inconnue qu'on ne souhaite PAS fixer à l'avance)

Je précise que les hauteurs des li changeront selon certaines actions complémentaires avec jQuery (masquage / apparitions de contenus dans les li).
L'objectif étant in-fine d'avoir toujours des li l'un sous l'autre bien alignés (j'ai déja géré avec jQuery l'alignement durant les action js, mais il faudrait déjà que ce soit clean sans js).

En l'état, selon leurs hauteurs respectives j'ai certains li de gauche qui passent sous le précèdent de droite car ce dernier est moins haut que son propre voisin de gauche.

voir image jointe pour visualiser la chose svp.

J'espère avoir été suffisamment explicite...
Merci

Modifié par elz64 (03 Sep 2010 - 11:18)

Salut,

il suffit d'affecter un clear:left à chaque LI de gauche :

li:nth-child(odd) {clear: left}

Pour la compatibilité avec IE < 9 (donc toutes les versions actuelles ) cela oblige à avoir une class pour chaque LI de gauche (ou de droite)

Merci

hum.. ben ca marche mais ca m'échappe. ca règle mon pb comme jepensais sous IE quand j'active le js (autre post réglé)
M.. alors!

float left ET clear left en même temps ??
houlà...

Révision s'iouplé ?

elz64 a écrit :
float left ET clear left en même temps ??

Oui : voir la spécification de la propriété clear.

je vais aller voir la v.o parce que la version Fr, ben la phrase elle cause pas bien la France

a écrit :
Cette propriété indique quels côtés d'une ou des boîtes d'un élément ne doivent pas être adjacents à une boîte flottante précédente.

elz64 a écrit :
float left ET clear left en même temps ??

Un deuxième élément flottant à gauche va se placer à côté du premier s'il en a la place.
clear: left; l'oblige à passer en-dessous, qu'il ait ou non suffisamment de place.