Une grille dynamique de divs s’enroule de manière incorrecte si la largeur / hauteur d’une cellule sont des valeurs flottantes (HTML / CSS / JS): webdev


C’est plus simple qu’il n’y paraît!

TL; DR est que je dois créer une grille dynamique de divs (en faisant The Odin Project) et la grille de divs, quel que soit le nombre de lignes et de colonnes nécessaires pour tenir dans le même canevas (un conteneur de 800×800 dans mon cas). Si 800 / lignes (ou colonnes) n’est pas un nombre rond, la grille déborde en manières étranges.

Gardez à l’esprit que cela se produit UNIQUEMENT dans Firefox, le chrome est légèrement meilleur mais il est toujours éteint de quelques pixels pour que vous puissiez le remarquer.

Le calcul que j’ai utilisé pour la taille de cellule (qui semble être à l’origine du problème) est:

remarque: les lignes et les colonnes sont les deux arguments de la fonction qui crée la grille. Dans le code actuellement, ils ont la même valeur puisque je teste uniquement avec des carrés pour le moment. cellH est l’abréviation de cellHeight et cellW est cellWidth.

let cellH = container.clientHeight/rows;
let cellW = container.clientWidth/columns;

(conteneur étant le cadre où ils doivent s’adapter)

Ensuite, je crée des div comme ceci dans une boucle for imbriquée (externe = lignes, interne = collumns)

        newCell.classList.add('divs');
        newCell.style.height = `${cellH}px`;
        newCell.style.width = `${cellW}px`;
        console.log(newCell.style.height);
        container.appendChild(newCell);

Et cela fonctionne parfaitement pour les nombres qui ont une valeur ronde pour cellH et cellW.

Je suppose que la conversion des flottants en une valeur px le casse d’une manière ou d’une autre, de sorte que je dois utiliser une autre valeur pour le dimensionnement, mais je ne sais pas exactement comment. est-ce que quelqu’un a une idée?

J’utilise aussi flex pour l’affichage du conteneur et flex-wrap: wrap également. Les blocs sont affichés sous forme de zone de bordure afin que les bordures ne posent pas de problème.

J’ai essayé de changer les propriétés d’affichage à la fois sur les enfants et sur le wrapper principal mais je ne peux pas le comprendre. Je suppose que je dois calculer la largeur / hauteur différemment pour finir avec une autre unité au lieu de px.

Toute aide serait grandement appréciée!

EDIT: Il semble également prendre en charge des nombres comme 22, qui renvoie un flottant, je suis encore plus confus maintenant

L’aperçu en direct est ici si vous voulez tester quand il se brise (la console renvoie la hauteur / largeur): https://stefan474.github.io/etch-a-sketch/

Voici le code: https://github.com/Stefan474/etch-a-sketch

Close Menu