vendredi 17 juin 2011

Une liste en élément flottant

Quand on fait une liste (de produits, de news, ou autre) avec des blocs flottants SOUVENT il y a des petits soucis quand on passe à la ligne. (un bloc qui veut pas s'aligner par exemple)
A part en fixant la hauteur des blocs en général c'est la galère.


Alors qu'avec une ligne de js on peut résoudre le problème (ici pour des lignes de 3 éléments flottants) :


On récupère la liste puis on applique un clear: both; sur le 4e élément flottant.
Cet élément revient dans le flux html et il n'y aura pas de saut de bloc sur la ligne suivante.


en jquery: 
$('#list-search > li:nth-child(3n+1)').css('clear','both');


en mootools
$$('#list-search > li:nth-child(3n+1)').setStyle('clear','both');


Après trois éléments flottant (une ligne), on remet l'élément suivant dans le flux et on repart sur une autre ligne.