Sisältö
On keskiyö ja tuo div sivustollasi näyttää edelleen lapsen lelurinnalta. Kaikki elementit ovat sekaisin sotkua, ja aina, kun pelaat CSS: n kanssa näyttö omaisuus, he järjestävät itsensä täysin erilaiseksi hölynpölyksi.
Jos olet kuin minä, ratkaiset tämän todennäköisesti mutisemalla hengityksesi alla ja tulemalla jatkuvasti aggressiivisemmaksi näppäimistön kanssa. Ja vaikka tämä strategia on toiminut minulle aiemmin, aloitin äskettäin etsimään paremman tavan ymmärtää näyttö omaisuus.
Osoittautuu perusasiat näyttö ovat paljon yksinkertaisempia kuin alun perin ajattelin. Itse asiassa he käyttävät samoja periaatteita kuin matkalaukun pakkaaminen. Aion peittää näyttö: lohko, inline-block ja linjassa. Jos olet järjestänyt matkalaukun järjestyksekkäästi aiemmin, näet rinnakkaisuuden. Jos olet sellainen henkilö, joka ryöstää kaikkia vaatteitasi sattumanvaraisella tavalla - voin tehdä vain niin paljon sinulle.
Matkalaukkumme sisältää kolmenlaisia vaatteita:
- Herkät, kuten kauluspaita
- T-paidat, jotka voidaan kääriä
- Sukat tai alusvaatteet, jotka voidaan täyttää aukkoihin
Jos mallinnamme matkalaukun HTML-muodossa, se näyttää tältä:
div class = 'matkalaukku'> div class = 'delicate'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 't-paita'> / div> div class = 'sukat'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 't-paita'> / div> / div>
Herkät esineet päällä
Näyttö: estää on oletus useimmille HTML-elementeille. Tämä tarkoittaa, että elementti vie koko vaakasuoran tilan säiliönsä sisällä div. Jos se on muiden sisarelementtien vieressä, se aloittaa uuden rivin eikä salli muita elementtejä rivilleen. Se on samanlainen kuin herkät tavarat, jotka laitat matkalaukun yläosaan. Nämä ovat herkkiä tai älykkäitä artikkeleita, kuten kauluspaidat. Et halua niiden rypistyvän, joten varmista, että niitä ei työnnetä muita vaatekappaleita vasten.
Tämä tuo esiin yhden vaikeimmista osista näyttö: lohko. Huomaa, kuinka kauluspaita ei vie matkalaukun koko leveyttä? Tämä ei tarkoita sitä, että muut kohteet nousevat tasolleen. Oletetaan, että tämä paita on 60 prosenttia matkalaukun leveydestä; se estäisi silti muita elementtejä liittymästä siihen ylätasolla.
Siksi kuvassa on oranssi reunus. A näyttö: lohko elementti lisää automaattisesti marginaalin sen ympärille, jos se ei vie koko vaakasuoraa tilaa.
Siististi pakatut T-paidat
Suurin osa matkalaukustasi on todennäköisesti täynnä muita vaatteitasi matkalle. Yksinkertaisuuden vuoksi aiomme leikata tämän vain T-paitoihin. Internetissä käydään laaja keskustelu siitä, onko taittaminen vai rullaus tehokkaampaa. Olen taitettava ihminen.
Joka tapauksessa, jotta mahtuisit eniten esineitä, asetat T-paidat vierekkäin. Tämä on juuri mitä näyttö: inline-block on tarkoitettu. Nämä elementit voivat istua vierekkäin samalla rivillä samoin kuin vierekkäin näyttö: inline elementtejä.
Toisin kuin näyttö: linjassa elementit, an inline-block elementti siirtyy seuraavalle riville, jos se ei mahdu sen sisältämään div toisen rinnalla inline-block elementtejä. Jotta T-paita vuotaa seuraavalle riville, sinun on leikattava se kahtia ja käytettävä jäljellä oleva puolikas uuden rivin aloittamiseksi. Inline-esto elementtejä ei saa jakaa kahtia, jos ne eivät sovi viivalle.
Sukat, jotka täyttävät aukot
Palaa alkuperäiseen HTML-koodiin ja huomaat, että sukkia on yksi div> kahdeksan T-paidan välillä. Mutta katsokaa oikealla olevan matkalaukun vaakasuuntaista näkymää. Jos sukkia on yksi div>, miten se voi päättää keskirivin ja aloittaa alarivin? Tämä on näyttö: linjassa!
An linjassa elementti valuu seuraavalle riville, jos se ylittää rivin leveyden div (tällä tavoin se eroaa inline-block tai lohko). Koska sukat div on täynnä satunnaisesti aukkoihin täytettyjä sukkia, se voi alkaa helposti täyttää aukon keskirivin oikealla puolella ja läikkyä alkuun alariville.
Mitään sukkia ei tarvitse leikata puoliksi, jotta tämä tapahtuisi. Siksi niistä voi tulla linjassa, kun taas T-paidat voivat olla vain inline-block. Jos keskirivin T-paidat olivat vain 60 prosenttia leveydestä, sukat div> siirtyisi ylöspäin täyttääkseen koko rivin loppuosan.
Hyvää matkaa
Tämä on matkalaukkumme viimeinen CSS:
.delicate {display: block; leveys: 60%; } .t-paita {display: inline-block; leveys: 20%; } .sukat {display: inline; }
Tässä on pari vaihtoehtoista skenaariota havainnollistamaan näytön eri käyttötapoja. Jos päällä olevat herkut olisivat näyttö: inline-block, ne sopivat aivan T-paitojen viereen. Jotkut T-paidat siirtyisivät yläriville, ja loput sopeutuivat vastaavasti. Kauluspaidan vasemmalla ja oikealla puolella ei olisi mukavaa puskuria.
Jos jokaisella T-paidalla olisi näyttö-lohko, sinulla olisi massiivinen pino T-paitoja päällekkäin, yksi riviä kohden. Jos sukat olisivat näyttö: inline-block, he kaikki istuivat alimmalla rivillä sen sijaan, että virtaisivat kahden rivin välillä. Jotkut T-paidat työnnettäisiin toiselle riville muodostaen neljäs viiva. T-paitojen keskirivin oikealla puolella olisi aukko.
Menetelmällä, jonka olen hahmottanut täällä, päädymme siististi pakattuun matkalaukkuun, joka hyödyntää parhaiten käytettävissä olevaa tilaa.
Tämä artikkeli ilmestyi alun perin nettilehti numero 289; osta se täältä!
