Discussion :

[Link14]

Bonsoir

J'ai un soucis que je n'arrive pas à résoudre. Ca fait 2h que j'essaie de trouver. Mais là j'abandonne, je demande de l'aide.

Je bosse avec Twitter Bootstrap. J'essaie de faire une liste horizontale de div, ces divs peuvent avoir des hauteurs différentes.
De plus, j'aimerai que le nombre de div par ligne dépende de la largeur de la fenêtre (plus c'est large, plus y'a de div sur la même ligne).

J'y suis presque, sauf que, les div de la ligne du dessous se "bloquent" lorsqu'un div du dessus est trop grand (trop haut en fait).

J'ai fait deux exemples là, un en utilisant la class CSS thumbnails présente dans bootstrap (je pensais que cette class gérait le problème, mais non). L'autre avec de simples div.
http://louwii.fr/bootstrapfail/

J'espère que l'exemple est assez parlant (mais je pense que oui). Tout le code est là.

Si une âme charitable veut bien expliquer comment résoudre ce problème, je lui serais très reconnaissant.

[PascalAC21]

Bonjour,

je vais peut-être dire une bêtise, mais j'assaierais bien de gérer d'une façon différente :

Faire une première liste inline, pour définir les colonnes. Puis dans chaque élément de cette liste, un nouvelle liste (mais pas inline, cette fois-ci), ce qui permet de contourner les problèmes de tailles différentes en hauteur.

Bonne Journée.

[Link14]

Le problème c'est que le nombre de colonnes n'est pas vraiment défini puisqu'il dépend de la largeur de la fenêtre.

[c_s_s]

Bonjour,

Tu pourrais ajouter ça dans ton fichier bootstrap.css (et peut-être aussi bootstrap-responsive.css) :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.row-fluid .thumbnails [class*="span"] {
	display:inline-block;
	float:none;
	vertical-align:top;
}

[Link14]

CA MARCHE !!
C'est génial, merci beaucoup ! En plus ça m'arrange beaucoup de pouvoir utiliser la class thumbnails.
Je l'ai ajouté dans bootstrap.css (et pas bootstrap responsive) et ça fonctionne très bien !