Bagaimana cara menggunakan kalkulator dengan betul?

Question

rreeee

Dalam grid saya mempunyai dua item, satu ialah 424px dan satu lagi ialah 608px. Saya mahu mereka responsif. Tetapi padding dan celah boleh menyebabkan ralat visual. Jadi saya mahu peratusan dengan pengiraan:

Logik: ((424px / (lebar penuh div - 30px)) * 100%) supaya div kami sentiasa mengubah saiz lebarnya

Tolong bantu saya. Berikut ialah isu yang dilaporkan oleh pengesah CSS: "Operan mestilah nombor"

Saya telah melakukan ini selama 4 jam: {

Answer 1

Bergantung pada nilai yang anda gunakan, ini nampaknya perkara yang betul untuk dilakukan. Ia responsif dan pada asasnya saiz yang sama dengan jurang 30px di antara mereka. Saya rasa penyelesaian anda terlalu rumit dan rapuh, terutamanya dari segi responsif.

Nombor anda:

• 30px selang
• Lebar lajur pertama 424px
• Lebar lajur kedua 608px
• Jumlah lebar asas: 1062px

Ini kira-kira nisbah 40% hingga 60%. Penggunaan 4fr 6fr或者更好的2fr 3fr sepatutnya cukup dekat.

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

Jika anda suka, kami boleh mendekatkan diri dengan menggunakan 424fr 608fr. Ini ialah nombor ganjil, tetapi ia akan menjadi nilai tepat yang anda cari. Daripada jumlah lebar, gunakan 424 markah untuk lajur pertama dan 608 markah untuk lajur kedua. Kemudian tambah selang.

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