Contenuto
- Gli oggetti delicati in cima
- T-shirt ben confezionate
- I calzini che riempiono gli spazi vuoti
- Buon viaggio
È mezzanotte e quella div sul tuo sito sembra ancora la cassa dei giocattoli di un bambino. Tutti gli elementi sono un pasticcio confuso e ogni volta che giochi con i CSS Schermo proprietà, si riorganizzano in una sciocchezza completamente diversa.
Se sei come me, probabilmente risolverai il problema mormorando sottovoce e diventando sempre più aggressivo con la tastiera. E sebbene quella strategia abbia funzionato per me prima, di recente ho deciso di trovare un modo migliore per capire il file Schermo proprietà.
Risulta le basi di Schermo sono molto più semplici di quanto pensassi inizialmente. In effetti, usano gli stessi principi di come preparare una valigia. Sto andando a coprire blocco di visualizzazione, blocco in linea e in linea. Se hai già sistemato una valigia in modo ordinato, vedrai il parallelo. Se sei il tipo di persona che sperona tutti i tuoi vestiti in modo casuale, beh, posso fare solo così tanto per te.
La nostra valigia conterrà tre tipi di abbigliamento:
- Delicati, come una camicia con il colletto
- Magliette arrotolabili
- Calzini o biancheria intima che possono essere infilati negli spazi vuoti
Per riferimento, se modellassimo la valigia in HTML, sarebbe simile a questa:
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 = 'socks'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> / div>
Gli oggetti delicati in cima
Blocco di visualizzazione è l'impostazione predefinita per la maggior parte degli elementi HTML. Ciò significa che l'elemento occupa l'intero spazio orizzontale all'interno del suo contenitore div. Se si trova accanto ad altri elementi di pari livello, inizierà una nuova riga e non consentirà altri elementi sulla sua riga. È simile agli oggetti delicati che metti in cima alla tua valigia. Questi sono articoli delicati o intelligenti come le camicie con colletto. Non vuoi che si raggrinziscano, quindi assicurati che non vengano spinti contro altri indumenti.
Questo fa apparire una delle parti più difficili di blocco di visualizzazione. Notate come la camicia con colletto non occupa l'intera larghezza della valigia? Ciò non significa che altri oggetti salteranno al suo livello. Supponiamo che questa maglietta sia il 60 per cento della larghezza della valigia; impedirebbe comunque ad altri elementi di unirsi al livello superiore.
Questo è il motivo per cui nell'immagine è presente un bordo arancione. UN blocco di visualizzazione l'elemento aggiungerà automaticamente un margine attorno ad esso se non occupa l'intero spazio orizzontale.
T-shirt ben confezionate
La maggior parte della tua valigia è probabilmente piena del resto dei tuoi vestiti per il tuo viaggio. Per semplicità, lo ridurremo solo alle magliette. C'è un grande dibattito su Internet sul fatto che la piegatura o il rotolamento siano più efficienti. Sono un tipo di persona pieghevole.
Ad ogni modo, per adattarsi al maggior numero di capi, allinea le tue magliette una accanto all'altra. Questo è esattamente quello che display: blocco in linea è pensato per. Questi elementi possono sedersi uno accanto all'altro sulla stessa linea, così come accanto a display: in linea elementi.
a differenza di display: in linea elementi, un blocco in linea l'elemento si sposterà alla riga successiva se non si adatta al suo contenuto div accanto all'altro blocco in linea elementi. Per fare in modo che una maglietta si rovesci sulla riga successiva, dovresti tagliarla a metà e utilizzare la metà rimanente per iniziare una nuova riga. Blocco in linea gli elementi non possono essere divisi a metà se non si adattano a una linea.
I calzini che riempiono gli spazi vuoti
Torna all'HTML originale e noterai che c'è un calzini div> tra le otto magliette. Ma dai un'occhiata alla vista orizzontale della valigia sulla destra. Se ce n'è uno calzini div>, come può terminare la riga centrale e iniziare la riga inferiore? Questo è lo scopo di display: in linea!
Un in linea l'elemento si estenderà alla riga successiva se supera la larghezza del file div (in questo modo è diverso da blocco in linea o bloccare). Dal momento che i nostri calzini div è pieno di calzini che vengono infilati a casaccio negli spazi vuoti, può facilmente iniziare a riempire lo spazio sul lato destro della riga centrale e traboccare per iniziare la riga inferiore.
Non sarà necessario tagliare a metà i calzini perché ciò avvenga. Questo è il motivo per cui possono diventare in linea, mentre le magliette possono essere solo blocco in linea. Se le magliette della fila centrale occupavano solo il 60% della larghezza, le calze div> si sposterebbe verso l'alto per riempire l'intero spazio sul resto della riga.
Buon viaggio
Questo è il CSS finale per la nostra valigia:
.delicate {display: block; larghezza: 60%; } .tshirt {display: inline-block; larghezza: 20%; } .socks {display: inline; }
Ecco un paio di scenari alternativi per illustrare i diversi usi del display. Se i delicati in cima lo avessero fatto display: blocco in linea, si adatterebbero proprio accanto alle magliette. Alcune delle magliette si sposterebbero fino alla riga superiore e il resto si adatterebbe di conseguenza. Non ci sarebbe un comodo cuscinetto a sinistra ea destra della camicia con colletto.
Se ogni maglietta avesse blocco di visualizzazione, avresti un'enorme pila di magliette una sopra l'altra, una per riga. Se i calzini l'avessero fatto display: blocco in linea, si siederebbero tutti sull'ultima riga anziché scorrere tra le due file. Alcune magliette sarebbero state spinte su un'altra riga, formando una quarta riga. Ci sarebbe uno spazio a destra della fila centrale di magliette.
Con il metodo che ho delineato qui, ci ritroviamo con una valigia ben imballata che sfrutta al meglio lo spazio disponibile.
Questo articolo è originariamente apparso in net magazine numero 289; compralo qui!
