Taanded plokkidest koosnevas plokikujulises paigutuses CSS-is
Oletame, et meil on plokikujuline paigutus nelja plokiga reas:
.child {
width: 25%;
}
Lisame oma plokkidele protsentuaalsed taanded horisontaalselt ja vertikaalselt:
.child {
margin-right: 1.5%;
margin-bottom: 1.5%;
}
.child:nth-child(4n) {
margin-right: 0;
}
Praegu see, mida me tegime, ei tööta korrektselt,
kuna plokkide ja taandete kogulaius
on suurem kui 100%. Korrektoimimiseks
peame igalt plokilt ära lõikama teatava
osa, et jätkus ruumi meie taandete jaoks.
Arvutame need osad välja.
Meie juhul selgub, et plokke on neli, nende vahel on kolm taandet - pooleteist protsenti. Et arvutada äralõigatav osa, tuleb taandete kogusumma jagada plokkide arvuga:
1.5% * 3 / 4 = 1.125
Siis on iga ploki laius võrdne:
25% - 1.5% * 3 / 4 = 23.875%
Saame järgmise koodi:
.child {
width: 23.875%;
margin-right: 1.5%;
margin-bottom: 1.5%;
}
.child:nth-child(4n) {
margin-right: 0;
}
Saame selle taande arvutamise üle kanda
funktsioonile calc:
.child {
width: calc(25% - 1.5% * 3 / 4);
margin-right: 1.5%;
margin-bottom: 1.5%;
}
.child:nth-child(4n) {
margin-right: 0;
}
Ploki laiuse võib ka lasta arvutada funktsioonil
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;
}
Määra plokkidele laius protsentides nii, et
plokikujulises paigutuses oleks kolm plokki reas ja nende vahe oleks 3%.
Määra plokkidele laius protsentides nii, et
plokikujulises paigutuses oleks kuus plokki reas ja nende vahe oleks 0.5%.
Määra plokkidele laius protsentides nii, et
plokikujulises paigutuses oleks neli plokki reas ja plokkide vahe oleks 30px.
Määra plokkidele laius protsentides nii, et
plokikujulises paigutuses oleks viis plokki reas ja plokkide vahe oleks 50px.