Langue
🎨 Skin viewer
Les plus téléchargés
- 1 npds_agenda415
- 2 npds_galerie384
- 3 Programmes de Technologie 1985 MEN ...381
- 4 86-Car368
- 5 photosize360
- 6 npds_annonces 357
- 7 npds_glossaire348
- 8 npds_encapsuleur343
- 9 bootstrap.png316
- 10 superhero288
Index du forum »» npds_galerie »» Déraillage de l'affichage....
Déraillage de l'affichage....#1410
https://labo.infocapagde.com/modules.php?ModPath=npds_galerie&ModStart=gal&op=gal&galid=16
Trois lignes good et après cela merde....
Trois lignes good et après cela merde....
Message édité par : phr / 06-11-2020 12:39
Oui j'ai vu cela aussi chez moi // mais c'est pas forcement systématique (assez rare) & bien plus aléatoire qu'une histoire de 3éme ligne il me semble. (chez moi seul les deux premières lignes affichaient une rangée de deux images? le reste sur trois ... / Donc difficile d'affilier une certaine logique à ce défaut/bug de comportement (?)
il me semble que l'on en avait déjà parlé ...
la doc de bootstrap ....
...
Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns. Cards are built with CSS column properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.
Heads up! Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to display: inline-block as column-break-inside: avoid isn't a bulletproof solution yet.
...
l'affichage que l'on voit est donc correct ! c'est surprenant mais c'est comme ça ...
donc en fait le principe du mécanisme est à peu près le suivant:
nb d'élément /nb de colonne (défini dans la css) = (arrondi au chiffre supérieur) nb d'éléments dans les x premières colonnes le reste dans la dernière colonne...
dans notre exemple :
(quand on a la colonne de gauche)
13/3 = 4,33 => 5 donc 5 + 5 + 3(le reste)
(Quand on a plus la colonne de gauche ...)
13/4 = 3,25 => 4 donc 4 + 4 + 4 + 1(le reste)
alors on peut re-changer ou essayer d'affiner mais il faudrait probablement ne pas utiliser card-columns car je ne pense pas que l'on puisse changer ce mécanisme ?....
on peut aussi tricher en ne proposant que des choix de nombre d'images par page en cohérence avec les styles(column-count) de nos colonnes ?? (c'est à dire pour être sûr un multiple entier de nombres de colonnes ..) dans ce cas la seule la dernière page de la galerie pourrait encore avoir ce comportement ....
tout ce comportement mathématique peut etre perturbé par une taille hétérogène des images ...
mais bon ce ne sera pas de la tarte pour trouver un compromis tenant compte de la taille des images, de leur position et de l'esthétisme ....
voili
la doc de bootstrap ....
...
Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns. Cards are built with CSS column properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.
Heads up! Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to display: inline-block as column-break-inside: avoid isn't a bulletproof solution yet.
...
l'affichage que l'on voit est donc correct ! c'est surprenant mais c'est comme ça ...
donc en fait le principe du mécanisme est à peu près le suivant:
nb d'élément /nb de colonne (défini dans la css) = (arrondi au chiffre supérieur) nb d'éléments dans les x premières colonnes le reste dans la dernière colonne...
dans notre exemple :
(quand on a la colonne de gauche)
@media (min-width: 576px) {
.card-columns {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 1.25rem;
-moz-column-gap: 1.25rem;
column-gap: 1.25rem;
orphans: 1;
widows: 1;
}
}
13/3 = 4,33 => 5 donc 5 + 5 + 3(le reste)
(Quand on a plus la colonne de gauche ...)
@media (max-width: 991px) and (min-width: 760px) {
.card-columns {
column-count: 4;
}
}
13/4 = 3,25 => 4 donc 4 + 4 + 4 + 1(le reste)
alors on peut re-changer ou essayer d'affiner mais il faudrait probablement ne pas utiliser card-columns car je ne pense pas que l'on puisse changer ce mécanisme ?....
on peut aussi tricher en ne proposant que des choix de nombre d'images par page en cohérence avec les styles(column-count) de nos colonnes ?? (c'est à dire pour être sûr un multiple entier de nombres de colonnes ..) dans ce cas la seule la dernière page de la galerie pourrait encore avoir ce comportement ....
tout ce comportement mathématique peut etre perturbé par une taille hétérogène des images ...
mais bon ce ne sera pas de la tarte pour trouver un compromis tenant compte de la taille des images, de leur position et de l'esthétisme ....
voili
L'eau goutte à goutte finit toujours par percer la pierre...
Message édité par : jpb / 16-11-2020 23:16