Annuler alignement de divs

Bonjour à tous,

Je désire afficher sur ma page d'accueil plusieurs divs côte à côte. Pour ça, je les ai mises en "display:inline-block". J'ai ensuite ajouté une marge à droite et en bas pour les espacer correctement. Le conteneur de ces divs a une largeur qui s'adapte automatiquement en fonction de la largeur de la fenêtre, ainsi si je redimensionne la fenêtre, le nombre de colonne s'adapte automatiquement. Seulement, j'ai un problème (logique, mais je ne sais pas le contourner) : Une ligne de plusieurs divs prend la hauteur de la div la plus haute, je m'explique par un schéma :

http://dl.dropbox.com/u/31625581/divs.png

Or ce que je voudrais moi ce serait :

http://dl.dropbox.com/u/31625581/divs2.png


Voilà, j'espère que malgré la qualité des schémas vous comprendrez mon problème. Merci d'avance pour votre aide !
Modifié par yeste64 (09 May 2012 - 09:20)

Hello,

Je crois que ceci est exactement ce que tu cherches : http://masonry.desandro.com/

Bonne journée

Merci pour la rapidité de votre réponse.

Il est vrai que c'est intéressant comme solution. Je suis très friand de javascript, et c'est vrai que j'aurais bien aimé le faire en javascript mais pour une question de légèreté, je dois le faire en CSS. Est-ce que c'est tout de même possible ? Car il est vrai qu'au redimensionnement de la fenêtre, même s'il n'y a pas d'effet de transition, les colonnes s'ajustent instantanément et le poste client est beaucoup moins sollicité (je pense notamment aux mobiles).

Enfin voilà, j'aimerais quand même creusé la piste du CSS..

Il n'y a vraiment aucun moyen en CSS..?

EDIT : Je viens de trouver cet excellent article qui traite exactement de ce problème : Article (Dans la partie "CSS", en bas). L'auteur montre le plug-in masonry cité par Raphael plus haut, ensuite Wookmark qui permet de faire sensiblement la même chose et enfin il propose une solution full css. Seulement, la compatibilité avec IE reste très faible (pas avant IE10)..

Seules les propriétés CSS3 permettent d'arriver à ce résultat ? Il doit bien y avoir un moyen en CSS2 .. ?
Modifié par yeste64 (10 May 2012 - 21:16)

Disons qu'au bout d'un moment, certains contraintes extrêmes ont du mal à pouvoir être respectées en même temps :
- positionnement avancé / alambiqué
- compatible tous navigateurs, même anciens
- sans aucun JavaScript ou autre alternative

Au bout d'un moment, il faut accepter de faire des concessions

Oui, il est vrai que là ça devient compliqué. Au final, ce que je recherche, c'est une version très légère de ce positionnement. C'est pour ça que je voudrais pouvoir utiliser CSS.

Je pense m'orienter vers le plug-in isotope : http://isotope.metafizzy.co/..

A regret mais bon, il faut savoir faire des concessions en effet.

Merci pour ton aide en tout cas