Sisu
On südaöö ja see üks div teie saidil näeb endiselt välja nagu lapse mänguasjakast. Kõik elemendid on segaduses ja iga kord, kui CSS-idega mängite kuva kinnisvara, korraldavad nad end täiesti erinevaks jaburuseks.
Kui olete minusugune, lahendate selle tõenäoliselt oma hinge all pomisedes ja muutudes klaviatuuriga pidevalt agressiivsemaks. Ja kuigi see strateegia on minu jaoks juba varem töötanud, otsustasin hiljuti leida parema viisi strateegia mõistmiseks kuva vara.
Selgub põhitõed kuva on palju lihtsamad, kui ma algselt arvasin. Tegelikult kasutavad nad samu põhimõtteid nagu kohvri pakkimine. Ma hakkan kajastama kuva: plokk, sees-blokeerida ja järjekorras. Kui olete kohvri varem korralikult korraldanud, näete paralleeli. Kui olete selline inimene, kes rammib kõiki teie riideid juhuslikult - ma saan teie heaks teha ainult nii palju.
Meie kohver sisaldab kolme tüüpi riideid:
- Õrn, nagu kaelusega särk
- T-särgid, mida saab kokku keerata
- Sokke või aluspesu, mida saab aukudesse toppida
Kui me modelleerime kohvri HTML-is, näeks see välja selline:
div class = 'kohver'> div class = 'delicate'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 't-särk'> / div> div class = 'sokid'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 't-särk'> / div> / div>
Õrnad esemed peal
Kuva: plokk on enamiku HTML-elementide jaoks vaikimisi. See tähendab, et element hõivab kogu mahuti horisontaalse ruumi div. Kui see asub teiste õdede-vendade elementide kõrval, alustab see uut joont ja ei luba teisi elemente oma liinil. See sarnaneb delikaatsete esemetega, mille panete oma kohvri ülaossa. Need on õrnad või nutikad artiklid, näiteks kraesärgid. Te ei soovi, et need kortsuks läheksid, seega veenduge, et neid ei surutaks teiste riidetükkide vastu.
See toob välja ühe kõige raskema osa kuva: plokk. Pange tähele, kuidas kaelusega särk ei hõivata kogu kohvri laiust? See ei tähenda, et teised üksused hüppaksid selle tasemele. Oletame, et see särk on 60 protsenti kohvri laiusest; see blokeeriks endiselt teiste elementide liitumise sellega ülemisel tasandil.
Seetõttu on pildil oranž ääris. A kuva: plokk element lisab selle ümber automaatselt veerise, kui see ei hõivata tervet horisontaalset ruumi.
Korralikult pakitud T-särgid
Enamik teie kohvritest on tõenäoliselt reisi jaoks ülejäänud riided täis. Lihtsuse huvides lõikame selle alla ainult T-särkidele. Internetis käib suur arutelu selle üle, kas voltimine või rullimine on tõhusam. Ma olen selline kokkuklapitav inimene.
Igatahes panete oma T-särgid kõrvuti, et mahutada kõige rohkem esemeid. See on täpselt see kuva: tekstiplokk on mõeldud. Need elemendid võivad istuda nii samal joonel kui ka kõrvuti kuva: sees elemendid.
Erinevalt kuva: sees elemendid, an sees-blokeerida element liigub järgmisele reale, kui see ei mahu oma sisusse div kõrvuti teisega sees-blokeerida elemendid. Selleks, et T-särk järgmisele reale valguks, peate selle poolitama ja ülejäänud osa uue rea alustamiseks kasutama. Sisse blokeeritud elementidel pole lubatud pooleks minna, kui need ei mahu joonele.
Sokid, mis täidavad lünki
Vaadake tagasi algse HTML-i juurde ja märkate, et sokke on üks div> kaheksa T-särgi vahel. Kuid heitke pilk paremal asuva kohvri horisontaalsele vaatele. Kui on üks sokk div>, kuidas saab see keskmise rea lõpetada ja alumise rea alustada? See on kuva: sees!
An järjekorras Kui element ületab laiuse, liigub element järgmisele reale div (sel viisil erineb see sees-blokeerida või blokeerida). Kuna meie sokid div on täis sokke, mis on juhuslikult aukudesse topitud, võib see alata keskmise rea paremal küljel olevat tühimikku ja alumise rea alustamiseks võib selle üle valguda.
Selleks ei pea ühtegi sokki poolitama. Sellepärast võivad nad saada järjekorras, samas kui T-särke saab ainult sees-blokeerida. Kui keskmise rea T-särgid moodustasid laiusest vaid 60 protsenti, olid sokid div> liiguks ülespoole, et täita ülejäänud rea kogu ruum.
Head reisi
See on meie kohvri viimane CSS:
.delicate {display: block; laius: 60%; } .tärk {display: inline-block; laius: 20%; } .sokid {kuva: inline; }
Siin on paar alternatiivset stsenaariumi, et illustreerida kuvamise erinevaid kasutusviise. Kui peal olevad delikaadid oleksid olnud kuva: tekstiplokk, need sobiksid otse T-särkide kõrvale. Mõni T-särk liiguks ülemisele reale ja ülejäänud kohanduksid vastavalt. Kaelusärgist vasakul ja paremal ei oleks mugavat puhvrit.
Kui igal T-särgil oleks olnud kuva-plokk, teil oleks üksteise peal tohutu virna T-särke, üks rea kohta. Kui sokkidel oleks olnud kuva: tekstisisene plokk, nad kõik istuksid kõige alumises reas, mitte ei voolanud kahe rea vahel. Mõned T-särgid lükatakse teisele reale, moodustades neljanda joone. T-särkide keskmise rea paremal oleks tühimik.
Selle meetodi abil, mille olen siin välja toonud, saame lõpuks korralikult pakitud kohvri, mis kasutab olemasolevat ruumi kõige paremini ära.
See artikkel ilmus algselt aastal netiajakiri väljaanne 289; osta siit!
