Questo articolo mostrerà le utilità che possono essere utilizzate per controllare il posizionamento degli elementi posizionati sulla pagina web.
Utilità Tailwind utilizzate per controllare il posizionamento degli elementi posizionati?
L'utilità CSS Tailwind che si occupa specificamente del posizionamento degli elementi posizionati sia sull'asse orizzontale che su quello verticale è “ In alto | Giusto | In basso | Sinistra ”. Proprio come altre utilità, fornisce anche varie classi che possono impostare l'elemento posizionato in vari posti, alcune di queste classi sono indicate di seguito:
- inserto-{placementValue}
- start-{placementValue}
- top-{placementValue}
- end-{placementValue}
- bottom-{placementValue}
- sinistra-{placementValue}
- destra-{placementValue}
Ora, facciamo un esempio pratico per utilizzare alcune di queste classi per una migliore comprensione.
Esempio: posizionamento dell'elemento posizionato utilizzando le utilità CSS Tailwind
In questo esempio, l'utilità sopra descritta verrà utilizzata per posizionare l'elemento posizionato in punti diversi su una pagina web, come mostrato di seguito:
< corpo classe = 'griglia griglia-cols-3' >
< div classe = 'relativo h-32 w-32 bg-orange-200 p-4 m-4 testo-centro giustifica-allungamento arrotondato' >
< div classe = 'assoluto sinistra-0 in alto-0 h-16 w-16 bg-blu-400 arrotondato p-4' > Articolo 1 < / div >
< / div >
< div classe = 'relativo h-32 w-32 bg-orange-200 p-4 m-4 testo-centro giustifica-allungamento arrotondato' >
< div classe = 'assoluto inserto-x-0 top-0 h-16 bg-blu-400 arrotondato p-4' > Articolo 2 < / div >
< / div >
< div classe = 'relativo h-32 w-32 bg-orange-200 p-4 m-4 testo-centro giustifica-allungamento arrotondato' >
< div classe = 'assoluto inserto-0 bg-blu-400 arrotondato p-4' > Articolo 3 < / div >
< / div >
< div classe = 'relativo h-32 w-32 bg-orange-200 p-4 m-4 testo-centro giustifica-allungamento arrotondato' >
< div classe = 'assoluto inserto-y-0 destra-0 w-16 bg-blu-400 arrotondato p-4' > Articolo 4 < / div >
< / div >
< div classe = 'relativo h-32 w-32 bg-orange-200 p-4 m-4 testo-centro giustifica-allungamento arrotondato' >
< div classe = 'assoluto in basso-0 destra-0 h-16 w-16 bg-blu-400 arrotondato p-4' > Articolo 5 < / div >
< / div >
< / corpo >
Descrizione del codice sopra:
- Per prima cosa, crea cinque genitori “ div ' e applicare varie classi CSS Tailwind per impostare la posizione relativa, l'altezza, la larghezza, lo sfondo, il riempimento, il margine e così via.
- Successivamente, crea un 'nidificato' div ' all'interno di ciascun 'div' genitore. Il posizionamento verrà eseguito per questo elemento 'div' nidificato.
- Quindi, applica le classi CSS tailwind di ' assoluto ”, “ H ”, “ In ”, “ bg '', ' P ', E ' arrotondato ” per modellare il nidificato “ div 'elemento.
- Successivamente, partendo dal div annidato da uno a cinque, assegna nuove classi di “ sinistra-0 in alto-0 ”, “ inserto-x-0 ”, “ inserto-0 ”, “ inserto-y-0 destra-0 ', E ' in basso-0 a destra-0 'rispettivamente.
- Queste classi impostano rispettivamente la posizione degli elementi div nidificati nell'angolo in alto a sinistra, coprono la posizione in alto, coprono l'intero spazio genitore, coprono il lato destro e coprono la posizione in basso a sinistra.
Dopo l'esecuzione, l'anteprima degli elementi div si presenta così:
L'output mostra che gli elementi posizionati sono posizionati nelle posizioni desiderate.
Conclusione
IL ' In alto | Giusto | In basso | Sinistra L'utilità Tailwind viene utilizzata per controllare il posizionamento degli elementi sulla pagina web. Utilizza diverse classi per individuare ciascuna posizione e quindi sposta l'elemento selezionato in quella posizione in base ai requisiti. Queste classi posizionano principalmente gli elementi posizionati a sinistra, a destra, in basso e in alto. Possono aiutare a coprire l'intera area, coprire direzioni specifiche come sinistra o in alto e così via. Questo articolo ha spiegato con successo le utilità che possono essere utilizzate per controllare il posizionamento degli elementi posizionati.