:root {
--offset: 30px;
}
.grid-cols-custom {
/* 使用自定义属性和calc()计算列宽 */
grid-template-columns: calc((424px / (100% - var(--offset))) * 100%) calc((608px / (100% - var(--offset))) * 100%);
Dans une grille, j'ai deux éléments, l'un fait 424 px et l'autre 608 px. Je veux qu’ils soient réactifs. Mais le rembourrage et les espaces peuvent provoquer des erreurs visuelles. Je veux donc un pourcentage avec calcul :
Logique : ((424px / (pleine largeur du div - 30px)) * 100%) pour que nos divs redimensionnent toujours leur largeur
S'il vous plaît, aidez-moi. Voici un problème signalé par le validateur CSS : "Un opérande doit être un nombre"
Je fais ça depuis 4 heures : {
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Selon les valeurs que vous utilisez, cela semble être la bonne chose à faire. Il est réactif et a fondamentalement la même taille avec un écart de 30 pixels entre eux. Je pense que votre solution est trop complexe et fragile, notamment côté responsive.
Votre numéro :
Cela représente environ un ratio de 40 % à 60 %. L'utilisation de
4fr 6fr或者更好的2fr 3frdevrait être suffisamment proche..grid { display: grid; grid-template-columns: 2fr 3fr; gap: 30px; height: 300px; } .col { background: lightseagreen; }Si vous le souhaitez, nous pouvons nous rapprocher en utilisant
424fr 608fr. C'est un nombre impair, mais ce sera la valeur exacte que vous recherchez. Sur la largeur totale, utilisez 424 scores pour la première colonne et 608 scores pour la deuxième colonne. Ajoutez ensuite des intervalles..grid { display: grid; grid-template-columns: 424fr 608fr; gap: 30px; height: 300px; } .col { background: lightseagreen; }