Man teko susidaryti šiek tiek situacijos, kai gaminau skysčių tinklelį iš dėžių su plūdėmis. Norėjau patikslinti, kiek langelių visoje eilėje buvo labai lengva, ir kad jie būtų viename konteinerio krašte. Tai nėra per sunku, nes mes žinome, kad tinklai nėra per daug apgalvoti ir tinkamas dėžutės dydis, galite gauti keturias plūduriuojančias dėžes iš eilės, 25% pločio
Bet ką daryti, jei norite naudoti maržą tarp langelių? Vis dar įmanoma, tik reikia šiek tiek pagalvoti. Tarkime, kad norite keturių iš eilės, turėsite išsiaiškinti, kiek vietos liko išnaudojus visą maržą. Kadangi nenorite maržos paskutiniame eilutėje, tai yra 3 paraštės:
100% - (3 * MARGIN)3 yra „norimos eilutės atėmus vieną“, taigi:
100% - ((ROWS - 1) * MARGIN)Tada padalysite likusią erdvę iš daugybės norimų langelių, taigi:
(100% - ((ROWS - 1) * MARGIN)) / ROWSTam galėtumėte naudoti „Sass“:
$numPerRow: 4; $margin: 2%; width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);Dar geriau, kad tai padarysime „@mixin“, kad galėtume tiesiog paskambinti, kai mums to reikia:
@mixin rowMachine($numPerRow, $margin) ( width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow); &:nth-child(n) ( margin-bottom: $margin; margin-right: $margin; ) &:nth-child(#($numPerRow)n) ( margin-right: 0; margin-bottom: 0; ) )Peržiūrėkite vaizdo įrašą, kad sužinotumėte apie šį keblų elementą su: n-asis vaikas
Vaizdo įraše, šiek tiek pradžioje su „Jade“ kilpa, galite sužinoti daugiau apie čia.
Ir štai rašiklis:
Žiūrėkite Chriso Coyierio (@chriscoyier) „CodePen“ paprastą rašiklio „Sass for Rows“ techniką.