Innhold
Det er midnatt, og den div på nettstedet ditt ser fremdeles ut som et barns lekekiste. Alle elementene er et rotete rot, og hver gang du spiller med CSS-er vise eiendom, omorganiserer de seg til en helt annen tull.
Hvis du er som meg, vil du sannsynligvis løse dette ved å mumle under pusten og bli konsekvent mer aggressiv med tastaturet. Og selv om denne strategien har fungert for meg før, har jeg nylig begynt å finne en bedre måte å forstå vise eiendom.
Det viser seg det grunnleggende om vise er mye enklere enn jeg opprinnelig trodde. De bruker faktisk de samme prinsippene som å pakke kofferten. Jeg skal dekke display: blokker, inline-blokk og på linje. Hvis du har ordnet en koffert på en ordnet måte før, vil du se parallellen. Hvis du er den slags person som rammer alle klærne dine på en tilfeldig måte - vel, det er bare så mye jeg kan gjøre for deg.
Kofferten vår vil inneholde tre typer klær:
- Finvask, som en krage skjorte
- T-skjorter som kan rulles sammen
- Sokker eller undertøy som kan stappes i hull
For referanse, hvis vi modellerte kofferten i HTML, ville den se slik ut:
div class = 'koffert'> div class = 'delicate'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 't-skjorte'> / div> div class = 'sokker'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 't-skjorte'> / div> / div>
De delikate elementene på toppen
Skjerm: blokk er standard for de fleste HTML-elementer. Det betyr at elementet opptar hele det horisontale rommet i containeren div. Hvis den er ved siden av andre søskenelementer, vil den starte en ny linje, og ikke tillate andre elementer på linjen. Det ligner på de delikate artiklene du legger øverst i kofferten. Dette er delikate eller smarte artikler som krage skjorter. Du vil ikke at de skal bli rynkete, så sørg for at de ikke blir presset opp mot andre klesplagg.
Dette bringer opp en av de tøffeste delene av display: blokker. Legg merke til hvordan krage-skjorten ikke opptar koffertens bredde? Det betyr ikke at andre gjenstander vil hoppe opp til nivået. La oss si at denne skjorten er 60 prosent av koffertens bredde; det vil fortsatt blokkere andre elementer fra å bli med på det øverste nivået.
Det er derfor det er en oransje kant på bildet. EN display: blokker elementet vil automatisk legge til en margin rundt det hvis det ikke opptar hele det horisontale rommet.
Ryddig pakket T-skjorter
Det meste av kofferten din er sannsynligvis full av resten av klærne for turen. For enkelhets skyld skal vi kutte dette ned til bare T-skjorter. Det er en stor debatt på internett om folding eller rulling er mer effektiv. Jeg er en sammenleggbar person.
Uansett, for å passe flest mulig ting, stiller du opp T-skjortene side om side. Dette er akkurat hva display: inline-block er ment for. Disse elementene kan sitte ved siden av hverandre på samme linje, så vel som ved siden av display: inline elementer.
I motsetning til display: inline elementer, en inline-blokk elementet vil flytte til neste linje hvis det ikke passer inn i det div sammen med den andre inline-blokk elementer. For å få en T-skjorte til å gå ut på neste rad, må du kutte den i to og bruke den resterende halvdelen til å starte en ny rad. Inline-blokk elementene får ikke dele seg i to hvis de ikke passer på en linje.
Sokkene som fyller hullene
Gå tilbake til den opprinnelige HTML-en, og du vil merke at det er én sokk div> mellom de åtte t-skjortene. Men ta en titt på den horisontale visningen av kofferten til høyre. Hvis det er en sokk div>, hvordan kan den avslutte den midterste raden og begynne den nederste raden? Dette er formålet med display: inline!
An på linje elementet vil spyle over til neste linje hvis det overstiger bredden på div (på denne måten er det forskjellig fra inline-blokk eller blokkere). Siden sokkene våre div er full av sokker som tilfeldig er fylt i hull, den kan lett begynne å fylle hullet på høyre side av den midterste raden og smitte over for å begynne den nederste raden.
Ingen sokker trenger å kuttes i to for at dette skal skje. Dette er grunnen til at de kan bli på linje, mens T-skjorter bare kan være inline-blokk. Hvis T-skjortene på den midterste raden bare tok opp 60 prosent av bredden, sokkene div> vil bevege seg opp for å fylle hele plassen på resten av raden.
God reise
Dette er den endelige CSS for kofferten vår:
.delicate {display: block; bredde: 60%; } .tshirt {display: inline-block; bredde: 20%; } .socks {display: inline; }
Her er et par alternative scenarier for å illustrere forskjellige bruksområder for skjerm. Hvis delikatene på toppen hadde display: inline-block, de ville passe inn rett ved siden av T-skjortene. Noen av T-skjortene beveger seg opp til topplinjen, og resten vil justere seg deretter. Det ville ikke være noen behagelig buffer til venstre og høyre for kragen.
Hvis hver T-skjorte hadde skjermblokk, ville du ha en massiv stabel med T-skjorter oppå hverandre, en per linje. Hvis sokkene hadde display: inline-block, de ville alle sitte på nederste rad i stedet for å flyte mellom de to radene. Noen t-skjorter ville bli presset til en annen rad og danne en fjerde linje. Det ville være et gap på høyre side av den midterste raden med T-skjorter.
Med metoden jeg har skissert her, ender vi opp med en pent pakket koffert som utnytter tilgjengelig plass best mulig.
Denne artikkelen dukket opprinnelig opp i nettmagasinet utgave 289; kjøp den her!
