In HTML, le immagini vengono utilizzate per scopi diversi e vengono generalmente visualizzati in forma verticale separatamente. Tuttavia, a volte, potrebbe essere necessario posizionare le immagini fianco a fianco per creare un layout elegante o per soddisfare qualsiasi altro scopo di sviluppo web.

In questo articolo, discuteremo di come posizionare due Div fianco a fianco in CSS usando:

• galleggiante
• griglia
• flettere

Iniziamo!

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

In CSS, il “galleggiante"La proprietà specifica la direzione mobile di un elemento. Posiziona un elemento sul lato destro o sinistro del contenitore, consentendo agli elementi in linea e di testo di avvolgerlo.

Sintassi

La sintassi della proprietà float è:

Float: nessuno | sinistra | a destra

Ecco la descrizione relativa al valore sopra menzionato della proprietà float:

• nessuno: È usato per non galleggiare.
• Sinistra: È usato per galleggiare elementi sul lato sinistro.
• Giusto: È usato per galleggiare elementi sul lato destro.

Usando il "galleggiante"Proprietà, puoi anche posizionare le immagini fianco a fianco. Passiamo all'esempio di posizionare le immagini fianco a fianco.

Esempio 1: posizionamento di due immagini fianco a fianco usando la proprietà float

Qui, abbiamo aggiunto un'intestazione usando

e creato due div e assegnato le fonti di immagine ad esso.

Html

Posizionare le immagini fianco a fianco usando il galleggiante CSS

In CSS, useremo ".div"Per accedere a entrambi i div che abbiamo creato nel file HTML. Successivamente, assegnare il valore della proprietà float come "Sinistra". Di conseguenza, l'effetto verrà applicato a entrambi i nostri contenitori.

CSS

.div
Float: a sinistra;

Come puoi vedere, abbiamo posizionato con successo le immagini fianco a fianco:

Esempio: posizionare due immagini fianco a fianco con lo spazio

Se si desidera creare spazio tra queste due immagini e posizionarle fianco a fianco, usa "larghezza"Proprietà e assegna un valore ad esso.

Qui, assegneremo il valore della proprietà di larghezza come "300px":

.div
Float: a sinistra;
larghezza: 300px;

Salva il codice dato e controlla i risultati:

Metodo 2: posizionare le immagini fianco a fianco in CSS usando la griglia

Per posizionare due o più di due immagini fianco a fiancogriglia"Viene utilizzato il layout. 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 è indicata come segue:

display: griglia;

Passiamo all'esempio.

Esempio

Qui creeremo quattro sottomarini all'interno dei nomi principali di div come "genitore"E aggiungi immagini usando il tag.

Html

Posizionare le immagini fianco a fianco usando la griglia CSS

Successivamente, nella sezione CSS, useremo il ".genitore"Per accedere al PATORE DIV e impostare il valore della proprietà Visualizza come"griglia". Successivamente, imposteremo la frazione usando il "colonne a griglia"Proprietà per creare spazio per le colonne. Specificando "1fr"Tre volte creerà"tre"Colonne, che significa che tutti i div hanno uguale spazio. Inoltre, imposteremo il divario tra le colonne utilizzando la proprietà di Gap della colonna e impostare il suo valore come "5px":

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

Una volta completato il codice CSS, eseguire il file HTML e controllare l'output:

Metodo 3: Posizionare due immagini fianco a fianco in CSS usando Flex

IL "flettere"È il valore della proprietà del display che consente di posizionare gli elementi fianco a fianco. In tale scenario, gli elementi verranno impostati in base alla vista dello schermo.

Sintassi

La sintassi della proprietà display con flessione è:

display: flex;

Passiamo all'esempio:

Esempio

Considereremo il precedente file HTML e aggiungeremo tre sotto di div all'interno del Div principale e specificheremo diverse fonti di immagini:

Posizionare le immagini fianco a fianco usando CSS Flex

In CSS, impostare il valore della proprietà Visualizza come "flettere"E imposta la colonna-gap come"5px":

.genitore
display: flex;
GAP: 5px;

Questo darà il seguente risultato:

Abbiamo fornito tre semplici modi per posizionare le immagini fianco a fianco in HTML e CSS.

Conclusione

Le immagini vengono posizionate fianco a fianco utilizzando tre diversi metodi di CSS, che sono i "flettere" E "griglia"Valori della proprietà di visualizzazione e"galleggiante" proprietà. CSS consente anche di posizionare lo spazio o il divario tra queste immagini adiacenti. In questa guida, abbiamo discusso in dettaglio questi tre metodi e fornito esempi di ciascun metodo per posizionare le immagini fianco a fianco usando CSS.