Efni.
Það er miðnætti og það div á síðunni þinni lítur enn út eins og leikfangakista barnsins. Allir þættir eru rugl og í hvert skipti sem þú spilar með CSS sýna eign, þeir endurskipuleggja sig í allt aðra vitleysu.
Ef þú ert eins og ég, muntu líklega leysa þetta með því að muldra undir andanum og verða stöðugt árásargjarnari með lyklaborðinu. Og þó að sú stefna hafi reynst mér áður, lagði ég nýlega til að finna betri leið til að skilja sýna eign.
Það kemur í ljós grunnatriði í sýna eru miklu einfaldari en ég hélt upphaflega. Reyndar nota þeir sömu lögmál og að pakka ferðatösku. Ég ætla að hylja skjámynd: loka, inline-block og í línu. Ef þú hefur raðað ferðatösku á skipulegan hátt áður, sérðu hliðstæðu. Ef þú ert sú manneskja sem rambar allan fatnað þinn á tilviljanakenndan hátt - ja, það er bara svo margt sem ég get gert fyrir þig.
Töskan okkar mun innihalda þrjár gerðir af fatnaði:
- Fíngerðir, eins og kraga bolur
- Bolir sem hægt er að bretta upp
- Sokkar eða nærföt sem hægt er að troða í eyður
Til viðmiðunar, ef við gerðum ferðatöskuna til fyrirmyndar í HTML, þá myndi hún líta svona út:
div class = 'ferðataska'> div class = 'delicate'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'sokkar'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> / div>
Viðkvæmu hlutirnir ofan á
Skjár: loka er sjálfgefið fyrir flesta HTML þætti. Það þýðir að frumefnið tekur allt lárétta rýmið innan ílátsins div. Ef það er við hliðina á öðrum systkinaþáttum byrjar það nýja línu og leyfir ekki öðrum þáttum á línunni. Það er svipað og viðkvæmu hlutina sem þú setur efst í ferðatöskunni þinni. Þetta eru viðkvæmir eða snjallir hlutir eins og kollóttir bolir. Þú vilt ekki að þeir verði hrukkaðir, svo þú gætir þess að þeim sé ekki ýtt upp á móti öðrum fatnaði.
Þetta kemur upp einn erfiðasti hlutinn af skjámynd: loka. Takið eftir því hvernig kraga bolurinn tekur ekki alla breidd ferðatöskunnar? Það þýðir ekki að aðrir hlutir muni hoppa upp á stig. Segjum að þessi bolur sé 60 prósent af breidd ferðatöskunnar; það myndi samt koma í veg fyrir að aðrir þættir tækju þátt á efsta stigi.
Þess vegna eru appelsínugular rammar á myndinni. A skjámynd: loka frumefni mun sjálfkrafa bæta við spássíu utan um það ef það tekur ekki allt lárétta rýmið.
Snyrtilega pakkaðir bolir
Flest ferðatöskan þín er líklega full af afganginum af fatnaði þínum fyrir ferðina þína. Til einföldunar ætlum við að klippa þetta niður í bara boli. Það er mikil umræða á internetinu hvort að brjóta saman eða velta er skilvirkara. Ég er manneskja sem leggst saman.
Engu að síður, til þess að passa sem flesta hluti, stillirðu upp bolunum þínum hlið við hlið. Þetta er nákvæmlega hvað skjámynd: inline-block er ætlað fyrir. Þessir þættir geta setið við hliðina á hvorri annarri á sömu línu sem og við hliðina á skjámynd: inline þætti.
Ólíkt skjámynd: inline frumefni, an inline-block frumefni færist í næstu línu ef það passar ekki í innihaldið div við hliðina á hinu inline-block þætti. Til þess að T-skyrta hellist yfir í næstu röð þarftu að skera hana í tvennt og nota þann helming sem eftir er til að hefja nýja röð. Inline-blokk þættir mega ekki kljúfa sig í tvennt ef þeir passa ekki á línu.
Sokkarnir sem fylla í eyðurnar
Athugaðu aftur í upprunalega HTML og þú munt taka eftir því að það er einn sokkur div> milli átta bolanna. En skoðaðu lárétta sýn á ferðatöskunni til hægri. Ef það er einn sokkur div>, hvernig getur það endað miðju röðina og byrjað neðstu röðina? Þetta er tilgangurinn með skjámynd: inline!
An í línu frumefni mun flæða yfir í næstu línu ef það fer yfir breidd div (á þennan hátt er það frábrugðið inline-block eða loka). Þar sem sokkarnir okkar div er fullur af sokkum sem eru tilviljanakenndir í eyður, það getur auðveldlega byrjað að fylla í skarðið hægra megin við miðju röðina og hellast yfir til að byrja neðstu röðina.
Enga sokka þarf að skera í tvennt til að þetta geti gerst. Þetta er ástæðan fyrir því að þeir geta orðið í línu, meðan bolir geta aðeins verið inline-block. Ef bolirnir í miðju röðinni tóku aðeins 60 prósent af breiddinni, sokkarnir div> myndi hreyfast upp til að fylla allt rýmið það sem eftir er af röðinni.
Góða ferð
Þetta er loka CSS fyrir ferðatöskuna okkar:
.delicate {display: block; breidd: 60%; } .tshirt {skjámynd: inline-block; breidd: 20%; } .sokkar {display: inline; }
Hér eru nokkrar aðrar aðstæður til að sýna mismunandi notkun skjásins. Ef fíngerðin að ofan höfðu skjámynd: inline-block, þeir myndu passa inn rétt við bolina. Sumir bolirnir myndu færast upp í efstu línuna og restin myndi aðlagast í samræmi við það. Það væri enginn þægilegur biðminni til vinstri og hægri við kraga bolinn.
Ef hver bolur hefði sýna-blokk, myndir þú hafa stóran stafla af bolum ofan á hvor annan, einn í hverri línu. Ef sokkarnir hefðu skjámynd: inline-block, þeir myndu allir sitja í neðri röð frekar en að flæða á milli tveggja raða. Sumum bolum yrði ýtt í aðra röð og myndað fjórðu línuna. Það væri skarð til hægri á miðri röð bolanna.
Með aðferðinni sem ég hef lýst hér, þá endum við með snyrtilega pakkaða ferðatösku sem nýtir plássið sem best er.
Þessi grein birtist upphaflega í net tímarit tölublað 289; kaupa það hér!
