Uvlačenja u pločicama sa automatskom širinom blokova u CSS-u
Neka imamo pločicu sa po četiri bloka u redu:
.child {
width: 25%;
}
Dodajmo našim blokovima procentualna uvlačenja horizontalno i vertikalno:
.child {
margin-right: 1.5%;
margin-bottom: 1.5%;
}
.child:nth-child(4n) {
margin-right: 0;
}
Za sada, ono što smo uradili neće raditi ispravno,
pošto je ukupna širina blokova i uvlačenja
veća od 100%. Za ispravan rad
potrebno je od svakog bloka "odgristi" određeni
deo kako bi bilo mesta za naša uvlačenja.
Izračunajmo te delove.
U našem slučaju imamo četiri bloka, a između njih tri razmaka - od po jedan i po procenat. Da bismo izračunali deo koji treba oduzeti, potrebno je ukupan razmak podeliti sa brojem blokova:
1.5% * 3 / 4 = 1.125
Tada će širina svakog bloka biti:
25% - 1.5% * 3 / 4 = 23.875%
Rezultat je sledeći kod:
.child {
width: 23.875%;
margin-right: 1.5%;
margin-bottom: 1.5%;
}
.child:nth-child(4n) {
margin-right: 0;
}
Ne moramo sami računati ovo uvlačenje, već možemo prepustiti
posao izračunavanja funkciji calc:
.child {
width: calc(25% - 1.5% * 3 / 4);
margin-right: 1.5%;
margin-bottom: 1.5%;
}
.child:nth-child(4n) {
margin-right: 0;
}
Neka i širinu bloka izračunava funkcija
calc:
.child {
width: calc(100% / 4 - 1.5% * 3 / 4);
margin-right: 1.5%;
margin-bottom: 1.5%;
}
.child:nth-child(4n) {
margin-right: 0;
}
Postavite blokovima širinu u procentima tako da
u pločici bude tri bloka u redu, a između njih
razmak od 3%.
Postavite blokovima širinu u procentima tako da
u pločici bude šest blokova u redu, a između
njih razmak od 0.5%.
Postavite blokovima širinu u procentima tako da
u pločici bude četiri bloka u redu, a između
blokova bude razmak od 30px.
Postavite blokovima širinu u procentima tako da
u pločici bude pet blokova u redu, a između
blokova bude razmak od 50px.