Conţinut
Este miezul nopții și asta div pe site-ul dvs. încă arată ca un cufăr de jucărie pentru copil. Toate elementele sunt o mizerie confuză și de fiecare dată când jucați cu CSS afişa proprietate, ei se rearanjează într-o bucată cu totul diferită de prostii.
Dacă sunteți ca mine, probabil că veți rezolva acest lucru mormăind sub respirație și devenind în mod constant mai agresiv cu tastatura. Și, deși acea strategie a mai funcționat pentru mine, recent mi-am propus să găsesc o modalitate mai bună de a înțelege afişa proprietate.
Se dovedește elementele de bază ale afişa sunt mult mai simple decât am crezut inițial. De fapt, ei folosesc aceleași principii ca și ambalarea unei valize. Voi acoperi afișaj: bloc, bloc în linie și în linie. Dacă ați aranjat o valiză în mod ordonat înainte, veți vedea paralela. Dacă ești genul de persoană care îți împinge toate hainele într-o manieră întâmplătoare - ei bine, pot face doar atât de mult pentru tine.
Valiza noastră va conține trei tipuri de îmbrăcăminte:
- Delicate, ca o cămașă cu guler
- Tricouri care pot fi înfășurate
- Șosete sau lenjerie care pot fi umplute în goluri
Pentru referință, dacă am modela valiza în HTML, ar arăta astfel:
div class = 'suitcase'> div class = 'delicate'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'șosete'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = „tricou”> / div> / div>
Articolele delicate de deasupra
Afișaj: bloc este implicit pentru majoritatea elementelor HTML. Asta înseamnă că elementul ocupă întregul spațiu orizontal din container div. Dacă se află lângă alte elemente frați, va începe o nouă linie și nu va permite alte elemente pe linia sa. Este similar cu articolele delicate pe care le-ați pus în partea de sus a valizei. Acestea sunt articole delicate sau inteligente, cum ar fi cămășile cu guler. Nu doriți să se încrețească, așa că vă asigurați că nu sunt împinse în sus împotriva altor piese vestimentare.
Acest lucru aduce în evidență una dintre cele mai dure părți ale afișaj: bloc. Observați cum cămașa cu guler nu ocupă întreaga lățime a valizei? Asta nu înseamnă că alte obiecte vor sări la nivelul său. Să presupunem că această cămașă reprezintă 60% din lățimea valizei; ar împiedica totuși alte elemente să se alăture la nivelul superior.
De aceea, există o margine portocalie în imagine. A afișaj: bloc elementul va adăuga automat o marjă în jurul său dacă nu ocupă întregul spațiu orizontal.
Tricouri frumos ambalate
Cea mai mare parte a valizei dvs. este probabil plină de restul hainelor pentru călătoria dvs. Din motive de simplitate, vom reduce acest lucru doar la tricouri. Există o mare dezbatere pe internet cu privire la faptul dacă plierea sau rularea sunt mai eficiente. Sunt o persoană pliabilă.
Oricum, pentru a se potrivi celor mai multe articole, vă aliniați tricourile unul lângă altul. Exact asta este afișaj: bloc în linie este menit pentru. Aceste elemente pot sta una lângă alta pe aceeași linie, precum și lângă afișaj: în linie elemente.
Spre deosebire de afișaj: în linie elemente, an bloc în linie elementul se va deplasa la următoarea linie dacă nu se încadrează în conținutul său div alături de celălalt bloc în linie elemente. Pentru a avea un tricou vărsat pe următorul rând, va trebui să îl tăiați în jumătate și să folosiți jumătatea rămasă pentru a începe un rând nou. Blocare în linie elementele nu au voie să se împartă în jumătate dacă nu se potrivesc pe o linie.
Șosetele care umple golurile
Reveniți la codul HTML original și veți observa că există un șosete div> între cele opt tricouri. Dar uitați-vă la vederea orizontală a valizei din dreapta. Dacă există un șosete div>, cum se poate termina rândul din mijloc și începe rândul de jos? Acesta este scopul afișaj: în linie!
Un în linie elementul se va revărsa la următoarea linie dacă depășește lățimea div (în acest fel este diferit de bloc în linie sau bloc). De când șosetele noastre div este plin de șosete care sunt umplute la întâmplare în goluri, poate începe cu ușurință să umple golul din partea dreaptă a rândului din mijloc și să se revărse pentru a începe rândul de jos.
Nu va trebui tăiat șosete în jumătate pentru ca acest lucru să se întâmple. De aceea pot deveni în linie, în timp ce tricourile pot fi doar bloc în linie. Dacă tricourile de pe rândul de mijloc ocupau doar 60% din lățime, șosetele div> s-ar deplasa în sus pentru a umple întreg spațiul de pe restul rândului.
Drum bun
Acesta este CSS final pentru valiza noastră:
.delicate {display: block; lățime: 60%; } .tshirt {display: inline-block; lățime: 20%; }. șosete {display: inline; }
Iată câteva scenarii alternative pentru a ilustra diferitele utilizări ale afișajului. Dacă delicatele de deasupra aveau afișaj: bloc în linie, s-ar potrivi chiar alături de tricouri. Unele dintre tricouri s-ar deplasa până la linia de sus, iar restul s-ar regla corespunzător. Nu ar exista un tampon confortabil în stânga și în dreapta cămășii cu guler.
Dacă fiecare tricou avea display-block, ai avea un teanc masiv de tricouri unul peste altul, câte unul pe linie. Dacă șosetele ar fi avut afișaj: bloc în linie, ar sta toți pe rândul de jos, mai degrabă decât să curgă între cele două rânduri. Unele tricouri ar fi împinse pe un alt rând, formând o a patra linie. Ar exista un spațiu în dreapta rândului de mijloc al tricourilor.
Cu metoda pe care am subliniat-o aici, ajungem la o valiză bine ambalată, care utilizează cel mai bine spațiul disponibil.
Acest articol a apărut inițial în revista net numărul 289; cumpără-l aici!
