Column et position absolute

Bonjour.

J’ai besoin de gérer l’affichage de blocs sur 2 colonnes. Pour l’instant c’est géré avec 2 colonnes dans le HTML et avec des blocs répartis dans ces 2 colonnes. Cela fonctionne bien (y compris sur mobile où les 2 col passent en 1) mais pose un problème de gestion des vides. En effet, imaginons les blocs 1 et 2 dans la colonne 1 et les blocs 3 et 4 dans la colonne 2. Ces blocs sont en affichage conditionnels (JS). Si je masque les blocs 1 et 2, les blocs 3 et 4 s’affichent dans la colonne 2 et laisse la colonne gauche vide, ce qui est assez moche.
Du coup, j’ai testé le CSS column en ne faisant qu’un seul bloc réglé en 2 colonnes. Cela fonctionne bien avec les blocs à contenus simples, mais me pose des soucis avec les blocs complexes (avec du contenu positionné en absolute, de l’overflow: hidden ou de l’opacity).

=> 1. Existe-t-il un moyen de faire cohabiter tout ça ?
=> 2. Voyez-vous un truc qui donnerait les même résultats que column mais sans les contraintes actuelles ?

J’ai peu d’espoir sur les réponses, mais on ne sait jamais…

Je viens de regarder cssWizardy (qui utilise le display: inline-block)et Bootstrap (qui utilise le float: left). A priori ils sont confrontés aux même écueils, à moins que j’ai raté quelque chose…

Je vais faire un document visuel et le mettre dans une mise à jour de ce message pour expliquer tout ça…

Mise à jour : fichier joint montrant ce que je désirerais faire et ce que donnent mes différentes tentatives :

Les flèches rouges montrent ce qui pose problème.
Modifié par Derwoed (22 Sep 2015 - 16:04)

Bonjour,

Masonry ?
En CSS avec une solution de repli JavaScript (même plugin utilisé) pour les navigateurs récalcitrants ?

Merci 6l20.
C’est bien ce que je veux obtenir. D’ailleurs, la méthode full CSS dans ton lien est la même que celle que j’avais mise-en-place pour tester. A priori, la propriété column est LA fonction CSS pour faire ça ! Malheureusement, bien qu’elle soit implémentée depuis longtemps dans les navigateurs et bien que mon projet ne tourne que sur webkit, elle est buguée, ou pour le moins implique des limitations :
- on ne peut pas mettre d’objets en positionnement relative ou absolute à l’intérieur des colonnes (manque indiqué dans le tuto de Raphaël ici)
- on ne peut pas mettre un élément en opacity autre que 1 dans ces même colonnes (bug que je n’ai vu référencé nulle-part, mais qui se produit chez moi).

Pour le premier point, j’ai réussi à reconstruire mes blocs sans position: absolute, sauf un cas qui me semble impossible (positionner un petit picto au pixel près par rapport au coin supérieur droit d’une image par-dessus celle-ci)
Pour le second je n’ai pas trouvé de parade…
D’où mon abandon de la méthode column…

Tout cela semble confirmer ce que je craignais : je vais devoir laisser tomber ou me rabattre sur une solution JS…
Modifié par Derwoed (22 Sep 2015 - 23:19)