Saturs
Ir pusnakts, un tas viens div jūsu vietnē joprojām izskatās kā bērnu rotaļlietu lāde. Visi elementi ir sajaukts haoss, un katru reizi, kad spēlējat ar CSS displejs īpašumā, viņi pārkārtojas par pavisam citu nejēdzību.
Ja esat līdzīgs man, jūs, iespējams, atrisināsit to, murminot zem elpas un kļūstot konsekventāk agresīvāks pret tastatūru. Un, lai gan šī stratēģija man ir darbojusies iepriekš, es nesen nolēmu atrast labāku veidu, kā saprast displejs īpašums.
Izrādās pamati displejs ir daudz vienkāršākas, nekā es sākotnēji domāju. Patiesībā viņi izmanto tos pašus principus kā čemodāna iesaiņošana. Es gatavojos segt displejs: bloķēt, inline-block un rindā. Ja iepriekš esat kārtīgi izkārtojis čemodānu, redzēsiet paralēli. Ja jūs esat tāds cilvēks, kurš visu jūsu apģērbu taranē nejauši - labi, es jums varu darīt tikai tik daudz.
Mūsu čemodānā būs trīs veidu apģērbi:
- Smalki, piemēram, apkakles krekls
- T-krekli, kurus var satīt
- Zeķes vai apakšveļu, ko var iebāzt spraugās
Ja mēs modelētu čemodānu HTML formātā, tas izskatās šādi:
div class = 'čemodāns'> div class = 'delicate'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'zeķes'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> / div>
Smalkie priekšmeti augšpusē
Displejs: bloķēt ir noklusējums lielākajai daļai HTML elementu. Tas nozīmē, ka elements aizņem visu horizontālo telpu tā konteinerā div. Ja tas atrodas blakus citiem brāļa vai māsas elementiem, tas sāks jaunu līniju un neļaus citus elementus uz tās līnijas. Tas ir līdzīgs smalkiem priekšmetiem, kurus jūs ievietojat čemodāna augšdaļā. Tie ir smalki vai gudri raksti, piemēram, apkakles krekli. Jūs nevēlaties, lai tie saburzītos, tāpēc pārliecinieties, ka tie nav piespiesti pie citiem apģērba gabaliem.
Tas izvirza vienu no visgrūtākajām displejs: bloķēt. Ievērojiet, kā apkaklīšu krekls neaizņem visu kofera platumu? Tas nenozīmē, ka citi priekšmeti pieaugs līdz līmenim. Pieņemsim, ka šis krekls ir 60 procenti no čemodāna platuma; tas joprojām traucētu citiem elementiem pievienoties tam augstākajā līmenī.
Tāpēc attēlā ir oranža apmale. A displejs: bloķēt elements automātiski pievienos rezervi ap to, ja tas neaizņem visu horizontālo atstarpi.
Glīti iesaiņoti T-krekli
Lielākā daļa jūsu čemodāna, iespējams, ir pilns ar pārējiem jūsu ceļojuma apģērbiem. Vienkāršības labad mēs to samazināsim tikai uz T-krekliem. Internetā notiek lielas debates par to, vai salocīšana vai velmēšana ir efektīvāka. Es esmu locīšanas veida cilvēks.
Jebkurā gadījumā, lai ietilptu visvairāk priekšmetu, jūs rindojat savus T-kreklus blakus. Tas ir tieši tas displejs: inline-block ir domāts. Šie elementi var sēdēt blakus viens otram vienā līnijā, kā arī blakus displejs: iekļauts elementi.
Atšķirībā no displejs: iekļauts elementi, an inline-block elements pāriet uz nākamo rindu, ja tas neietilpst saturā div līdzās otram inline-block elementi. Lai T-krekls izšļakstītos uz nākamo rindu, jums tas jāpārgriež uz pusēm un jāizmanto atlikusī puse, lai sāktu jaunu rindu. Iekļautais bloks elementiem nav atļauts sadalīties uz pusēm, ja tie neatbilst līnijai.
Zeķes, kas aizpilda tukšumus
Atgriezieties pie sākotnējā HTML un pamanīsit, ka ir viena zeķe div> starp astoņiem T-krekliem. Bet ieskatieties kofera horizontālajā skatā labajā pusē. Ja ir viena zeķe div>, kā tas var beigt vidējo rindu un sākt apakšējo rindu? Tas ir mērķis displejs: iekļauts!
An rindā elements pārslīdēs uz nākamo rindu, ja tas pārsniegs div (šādā veidā tas atšķiras no inline-block vai bloķēt). Kopš mūsu zeķes div ir pilns ar zeķēm, kas nejauši iepildītas spraugās, tas var viegli sākt aizpildīt atstarpi vidējās rindas labajā pusē un izlīst, lai sāktu apakšējo rindu.
Neviena zeķe nebūs jāpārgriež uz pusēm, lai tas notiktu. Tāpēc viņi var kļūt rindā, savukārt T-krekli var būt tikai inline-block. Ja T-krekli vidējā rindā aizņem tikai 60 procentus no platuma, zeķes div> pārvietotos uz augšu, lai aizpildītu visu vietu pārējā rindā.
Bon reiss
Šī ir pēdējā čemodāna CSS:
.delicate {display: block; platums: 60%; } .tshirt {display: inline-block; platums: 20%; } .socks {display: inline; }
Šeit ir pāris alternatīvi scenāriji, lai ilustrētu dažādus displeja izmantošanas veidus. Ja delikateses uz augšu būtu displejs: inline-block, tie derētu tieši blakus T-krekliem. Daži no T-krekliem pārvietotos augšējā līnijā, bet pārējie attiecīgi pielāgotos. Apkakles krekla kreisajā un labajā pusē nebūtu ērta bufera.
Ja katram krekliņam būtu displeja bloks, jums būtu masīva kaudze T-kreklu viens virs otra, pa vienai rindai. Ja zeķes būtu displejs: inline-block, viņi visi sēdēja apakšējā rindā, nevis plūda starp divām rindām. Daži T-krekli tiktu iestumti citā rindā, veidojot ceturto līniju. T-kreklu vidējās rindas labajā pusē būtu atstarpe.
Izmantojot šeit aprakstīto metodi, mēs iegūstam glīti iesaiņotu čemodānu, kas vislabāk izmanto pieejamo vietu.
Šis raksts sākotnēji parādījās net žurnāls 289. izdevums; nopērciet to šeit!
