Wie benutzt man einen Taschenrechner richtig?

Question

:root {
    --offset: 30px;
  }

  .grid-cols-custom {
    /* 使用自定义属性和calc()计算列宽 */
    grid-template-columns: calc((424px / (100% - var(--offset))) * 100%)  calc((608px / (100% - var(--offset))) * 100%);

In einem Raster habe ich zwei Elemente, eines ist 424 Pixel und das andere 608 Pixel. Ich möchte, dass sie reagieren. Doch Polsterungen und Lücken können zu optischen Fehlern führen. Ich möchte also einen Prozentsatz mit Berechnung:

Logik: ((424px / (volle Breite des Divs – 30px)) * 100 % damit die Breite unserer Divs immer angepasst wird

Bitte hilf mir. Hier ist ein vom CSS-Validator gemeldetes Problem: „Ein Operand muss eine Zahl sein“

Ich mache das seit 4 Stunden: {

Answer 1

根据您使用的数值，这似乎是正确的做法。它是响应式的，大小基本相同，之间有30px的间隔。我认为您的解决方案太复杂且脆弱，特别是在响应式方面。

您的数字：

• 30px的间隔
• 424px的第一列宽度
• 608px的第二列宽度
• 基本总宽度：1062px

这大致是40%到60%的比例。使用4fr 6fr或者更好的2fr 3fr应该足够接近。

.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>

如果您愿意，我们可以通过使用424fr 608fr来更接近。这是奇数，但这将是您所寻找的确切值。在总宽度中，使用424个分数作为第一列，使用608个分数作为第二列。然后添加间隔。

.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>