Comment utiliser correctement une calculatrice ?

Question

: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 : {

Answer 1

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 :

• Intervalle de 30px
• Première largeur de colonne de 424px
• Deuxième largeur de colonne de 608px
• Largeur totale de base : 1062px

Cela représente environ un ratio de 40 % à 60 %. L'utilisation de 4fr 6fr或者更好的2fr 3fr devrait être suffisamment proche.

.grid {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 30px;
  height: 300px;
}

.col {
background: lightseagreen;
}

<div class="grid">
  <div class="col">第一列：2fr</div>
  <div class="col">第二列：3fr</div>
</div>

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;
}

<div class="grid">
  <div class="col">第一列：424fr</div>
  <div class="col">第二列：608fr</div>
</div>