3 modi semplici per posizionare due div fianco a fianco in CSS

I Div sono utilizzati principalmente per creare diverse sezioni in HTML, che possono essere disegnate di conseguenza con l'aiuto del CSS. A volte potrebbe essere necessario posizionare due Div fianco a fianco per creare un layout elegante. A tale scopo, CSS fornisce vari metodi come:

• Usando "griglia"
• Usando "flettere"
• Usando "galleggiante"

In questo articolo, discuteremo di ciascuno degli approcci menzionati uno per uno e forniremo un esempio adeguato di ciascun metodo.

Quindi iniziamo!

Metodo 1: posizionare due Div fianco a fianco in CSS usando la griglia

Il CSS "griglia"Il layout consente all'utente di posizionare due o più due div fianchi. Fondamentalmente, la griglia è un valore della proprietà di visualizzazione utilizzata per creare un layout costituito da righe e colonne.

Sintassi

La sintassi della proprietà del display con layout della griglia è riportata di seguito:

Display: griglia

Ora, diamo un'occhiata a un esempio relativo al posizionamento di due Div fianco a fianco in CSS usando il layout della griglia.

Esempio

Qui creeremo due di div figlio all'interno del div genitore, avendo i nomi di classe come "genitore","bambino" E "bambino":

Successivamente nella sezione CSS, usa ".genitore"Per accedere al PATORE DIV e impostare il valore della proprietà Visualizza come"griglia". Successivamente, imposta la frazione usando "colonne a griglia"Proprietà 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 uguale spazio. Inoltre, imposteremo il divario tra due colonne utilizzando la proprietà colonnellata e impostare il suo valore come "25px".

CSS:

.genitore
display: griglia;
colonne a griglia-template: 1fr 1fr;
colonna-gap: 25px;

Nel passaggio successivo, usiamo ".bambino"Per accedere sia a DAV di bambino e impostare l'altezza dei div come"250px"E imposta il colore di sfondo come"RGB (253, 5, 109)":

.bambino
Altezza: 250px;
Background: RGB (253, 5, 109);

Questo mostrerà il seguente risultato:

Passiamo a un altro metodo per posizionare Div fianco a fianco

Metodo 2: posizionare due Div fianco a fianco in CSS usando Flex

IL "flettere"È il valore della proprietà del display che consente di posizionare due div fianchi. Questa proprietà viene utilizzata per impostare una lunghezza flessibile per l'oggetto flessibile. Si restringe o cresce l'oggetto flessibile per adattarsi al suo contenitore.

Sintassi

La sintassi della proprietà display con flex è riportata di seguito:

display: flex;

Passiamo all'esempio per capire il concetto dichiarato.

Esempio

Considereremo lo stesso file HTML e applicheremo "flettere"Al contenitore genitore. Qui, imposteremo il valore della proprietà del display come flessibile e imposteremo il divario tra i Div del bambino come "10px":

.genitore
display: flex;
GAP: 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;
Background: RGB (0, 255, 42);

Il risultato del codice dato è riportato di seguito:

Metodo 3: posizionare due Div fianco a fianco in CSS usando il galleggiante

La proprietà Float CSS specifica la direzione mobile di un elemento. Più specificamente, questa proprietà può essere utilizzata per posizionare due Div fianco a fianco in CSS.

Sintassi

La sintassi della proprietà float è:

Float: nessuno | sinistra | a destra

Ecco la descrizione per i valori di cui sopra:

• nessuno: È usato per limitare il galleggiante.
• Sinistra: È usato per galleggiare elementi sul lato sinistro.
• Giusto: È usato per galleggiare elementi sul lato destro.

Passiamo all'esempio del posizionamento di Div fianco a fianco.

Esempio

Ora creeremo due div all'interno del tag e assegneremo il nome della classe come "Div1" E "Div2":

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 ad entrambi sono gli stessi.

Successivamente, assegniamo il valore della proprietà float come "Sinistra"E imposta la larghezza e l'altezza del div come"50%" E "40%". Utilizziamo anche la proprietà di dimensionamento della scatola e impostiamo il suo valore come "Border-Box". Inoltre, imposta il colore di sfondo del div come "RGB (7, 255, 222)"E imposta i valori della proprietà di frontiera come"3px","solido", E "RGB (255, 0, 255)":

.Div1, .Div2
Float: a sinistra;
larghezza: 50%;
Altezza: 40%;
Dimensizzazione di scatole: bordo-box;
Background: RGB (7, 255, 222);
Bordo: 3px Solid RGB (255, 0, 255);

Nota: È possibile posizionare due Div fianco a fianco senza utilizzare proprietà di dimensioni e bordo impostando i diversi colori di sfondo dei div.

Una volta implementato il codice sopra, esegui il file HTML e visualizza il risultato:

Nota: Per creare un divario tra due div, creare prima un altro div e quindi impostare il margine del div di conseguenza.

Conclusione

I div possono essere posizionati fianco a fianco utilizzando tre diversi metodi di CSS, che sono i "flettere" E "griglia"Valori della proprietà di visualizzazione e"galleggiante" proprietà. Ognuno dei metodi funziona in modo efficiente; Tuttavia, puoi utilizzare uno di loro in base alle nostre esigenze. In questa guida, abbiamo discusso di tre metodi per posizionare Div fianco a fianco usando CSS e fornito esempi correlati.