Innrykk i flisearrangement med auto-bredde blokker i CSS
La oss si at vi har et flisearrangement med fire blokker på rad:
.child {
width: 25%;
}
La oss legge til innrykk i prosent for blokkene våre horisontalt og vertikalt:
.child {
margin-right: 1.5%;
margin-bottom: 1.5%;
}
.child:nth-child(4n) {
margin-right: 0;
}
Det vi har gjort så langt vil ikke fungere korrekt,
siden den totale bredden på blokkene og innrykkene
er mer enn 100%. For at det skal fungere korrekt
må vi skjære av en liten del fra hver blokk
for å gjøre plass til innrykkene våre.
La oss beregne disse delene.
I vårt tilfelle har vi fire blokker, og mellom dem tre innrykk – på halvannen prosent hver. For å beregne delen som må skjæres av, må du dele det totale innrykket på antall blokker:
1.5% * 3 / 4 = 1.125
Da vil bredden på hver blokk være:
25% - 1.5% * 3 / 4 = 23.875%
Resultatet blir følgende kode:
.child {
width: 23.875%;
margin-right: 1.5%;
margin-bottom: 1.5%;
}
.child:nth-child(4n) {
margin-right: 0;
}
Du kan la være å beregne dette innrykket selv, og overlate
beregningsarbeidet til calc-funksjonen:
.child {
width: calc(25% - 1.5% * 3 / 4);
margin-right: 1.5%;
margin-bottom: 1.5%;
}
.child:nth-child(4n) {
margin-right: 0;
}
La også calc-funksjonen beregne blokkbredden:
.child {
width: calc(100% / 4 - 1.5% * 3 / 4);
margin-right: 1.5%;
margin-bottom: 1.5%;
}
.child:nth-child(4n) {
margin-right: 0;
}
Angi blokkene en bredde i prosent slik at
det blir tre blokker på rad i flisearrangementet, med
avstand på 3% mellom dem.
Angi blokkene en bredde i prosent slik at
det blir seks blokker på rad i flisearrangementet, med
avstand på 0.5% mellom dem.
Angi blokkene en bredde i prosent slik at
det blir fire blokker på rad i flisearrangementet, med
avstand på 30px mellom blokkene.
Angi blokkene en bredde i prosent slik at
det blir fem blokker på rad i flisearrangementet, med
avstand på 50px mellom blokkene.