In questo articolo, discuteremo ciascuno degli approcci menzionati uno per uno e forniremo un esempio appropriato di ciascun metodo.
Quindi iniziamo!
Metodo 1: posiziona due div affiancati in CSS utilizzando la griglia
Il CSS” griglia ” layout consente all'utente di affiancare due o più due div. Fondamentalmente, la griglia è un valore della proprietà display utilizzata per creare un layout composto da righe e colonne.
Sintassi
Di seguito è riportata la sintassi della proprietà display con layout a griglia:
visualizzazione: griglia
Ora, diamo un'occhiata a un esempio relativo al posizionamento di due div fianco a fianco in CSS utilizzando il layout della griglia.
Esempio
Qui creeremo due div figlio all'interno del div genitore, con i nomi delle classi come ' genitore ”, “ bambino ' e ' bambino ”:
< div classe = 'genitore' >< div classe = 'bambino' >< / div >
< div classe = 'bambino' >< / div >
< / div >
Successivamente nella sezione CSS, usa ' .genitore ” per accedere al div genitore e impostare il valore della proprietà display come “ griglia ”. Quindi, imposta la frazione usando ' colonne-modello-griglia ” per creare spazio per le colonne. Nel nostro caso, imposteremo le frazioni come ' 1fr ' e ' 1fr ”, il che significa che entrambi i div hanno acquisito lo stesso spazio. Inoltre, imposteremo lo spazio tra due colonne utilizzando la proprietà column-gap e imposteremo il suo valore come ' 25px ”.
CSS:
.genitore {Schermo : griglia ;
colonne-modello-griglia : 1fr 1fr ;
spazio tra le colonne : 25px ;
}
Nel passaggio successivo, utilizziamo ' .bambino ” per accedere a entrambi i div figlio e impostare l'altezza dei div come “ 250px ' e imposta il colore di sfondo come ' RGB(253, 5, 109) ”:
.bambino {altezza : 250px ;
sfondo : rgb ( 253 , 5 , 109 ) ;
}
Questo mostrerà il seguente risultato:
Passiamo a un altro metodo per posizionare div fianco a fianco
Metodo 2: posiziona due div fianco a fianco in CSS usando flex
Il ' flettere ” è il valore della proprietà display che permette di affiancare due div. Questa proprietà viene utilizzata per impostare una lunghezza flessibile per l'elemento flessibile. Rimpicciolisce o fa crescere l'oggetto flessibile per adattarlo al suo contenitore.
Sintassi
La sintassi della proprietà display con flex è riportata di seguito:
display: flessibile;Passiamo all'esempio per comprendere il concetto affermato.
Esempio
Considereremo lo stesso file HTML e applicheremo ' flettere ” al contenitore padre. Qui imposteremo il valore della proprietà display come flex e imposteremo lo spazio tra i div figlio come ' 10px ”:
.genitore {Schermo : flettere ;
spacco : 10px ;
}
Successivamente, imposta la larghezza, l'altezza e il colore di sfondo del div come ' 650px ”, “ 200px ', e “rgb(0, 255, 42) ”, rispettivamente:
.bambino {larghezza : 650px ;
altezza : 200px ;
sfondo : rgb ( 0 , 255 , 42 ) ;
}
Il risultato del codice dato è riportato di seguito:
Metodo 3: posiziona due div affiancati in CSS usando float
La proprietà CSS float specifica la direzione mobile di un elemento. In particolare, questa proprietà può essere utilizzata per affiancare due div in CSS.
Sintassi
La sintassi della proprietà float è:
float: nessuno|sinistra|destraEcco la descrizione dei valori sopra indicati:
- nessuno: Viene utilizzato per limitare il galleggiamento.
- sinistra: Viene utilizzato per far fluttuare gli elementi sul lato sinistro.
- Giusto: Viene utilizzato per far fluttuare gli elementi sul lato destro.
Passiamo all'esempio di affiancare i div.
Esempio
Ora creeremo due div all'interno del tag
e assegneremo il nome della classe come ' div1 ' e ' div2 ”: < corpo >< div classe = 'div1' >< / div >
< div classe = 'div2' >< / div >
< / corpo >
Quindi, usa ' .div1 ' e ' .div2 ” per accedere ai contenitori aggiunti nella sezione HTML. Useremo entrambi i div nella stessa classe perché le proprietà e i valori che assegneremo a entrambi sono gli stessi.
Successivamente, assegniamo il valore della proprietà float come ' sinistra ' e impostare la larghezza e l'altezza del div come ' cinquanta% ' e ' 40% ”. Usiamo anche la proprietà box-sizing e impostiamo il suo valore come ' scatola di confine ”. Inoltre, imposta il colore di sfondo del div come ' RGB(7, 255, 222) ' e imposta i valori della proprietà del bordo come ' 3px ”, “ solido ', e ' RGB(255, 0, 255) ”:
.div1 , .div2 {galleggiante : sinistra ;
larghezza : cinquanta% ;
altezza : 40% ;
dimensioni della scatola : scatola di confine ;
sfondo : rgb ( 7 , 255 , 222 ) ;
confine : 3px solido rgb ( 255 , 0 , 255 ) ;
}
Nota: È possibile posizionare due div affiancati senza utilizzare la proprietà box-sizing e la proprietà border impostando i diversi colori di sfondo dei div.
Una volta implementato il codice sopra, esegui il file HTML e vedi il risultato:
Nota: Per creare uno spazio tra due div, creare prima un altro div e quindi impostare il margine del div di conseguenza.
Conclusione
I div possono essere affiancati utilizzando tre diversi metodi di CSS, che sono i ' flettere ' e ' griglia ' valori della proprietà display e ' galleggiante ' proprietà. Ciascuno dei metodi funziona in modo efficiente; tuttavia, puoi utilizzarne uno qualsiasi in base alle nostre esigenze. In questa guida, abbiamo discusso tre metodi per affiancare div utilizzando CSS e fornito esempi correlati.