La grafica e le immagini rendono le pagine Web più intuitive. Inoltre, le immagini attirano l'attenzione dell'utente e aiutano nello stile o nella progettazione dell'applicazione. L'applicazione che ha più immagini ottiene più visualizzazioni. Inoltre, ci sono diversi modi per regolare le posizioni dell'immagine in CSS, come l'uso di Flexbox, Grid, Float Properties e molti altri.

Il Write-up discuterà diversi metodi per avere immagini e testo fianco a fianco in HTML.

Prerequisito: crea un file HTML

Prima di passare all'oggetto principale del post, seguire le istruzioni di seguito per la creazione di un file HTML:

• Aggiungere un ""Elemento e nomina la sua classe"Linux-Details".
• Aggiungi due "" elementi figlio all'interno del principale "" per l'immagine e il testo rispettivamente. Assegna il ""Tagga una classe"Linux-img" e il "

  Tag con la classe "testo".

• Regola la dimensione del carattere "

  "Tag utilizzando il"dimensione del font" proprietà.

• Includere del testo all'interno del "

  "Tag.

Html

Linuxhint

Video di qualità, migliori articoli

Metodo 1: come avere immagine e testo fianco a fianco usando la proprietà "float"?

Il CSS "galleggiante"La proprietà viene utilizzata per determinare la posizione dell'elemento, sia che sia fluttuata a sinistra o a destra o nessuna. Un elemento galleggiato sarà circondato dagli elementi accanto.

Classe "Linux-Details" di stile

Per farlo, prima, modella "Linux-Details"Classe assegnando le seguenti proprietà:

.Linux-Details
larghezza: 80%;
imbottitura: 1%;

IL ".Linux-Details"Viene utilizzato per accedere al contenitore creato. Questa classe viene quindi applicata con le proprietà basate su scaletta:

• "larghezza"Determina la larghezza dell'elemento.
• "imbottitura"Assegna lo spazio attorno al contenuto dell'elemento.

Classe "Linux-IMG" di stile

Il CSS "galleggianteLa proprietà "viene aggiunta all'interno del"Linux-img"Classe per regolare la posizione dell'immagine:

.Linux-img
Altezza: 150px;
larghezza: 150px;
Margin-Left: 30%;
Float: a sinistra;

Qui:

• "altezza"Regola l'altezza dell'elemento.
• "margine-sinistra"Aggiunge un po 'di spazio al lato sinistro dell'elemento.
• "galleggiante"Proprietà con il valore"Sinistra"Galleggia l'immagine a sinistra. Di conseguenza, il contenuto di testo accanto verrà posto dopo di esso.

Produzione

Metodo 2: come avere immagine e testo fianco a fianco usando la proprietà "griglia"?

Il CSS "griglia"La proprietà fornisce un modo più semplice per progettare un layout del sito Web che fornisce righe e colonne.

Classe "Linux-Details" di stile

Ora il "grigliaLa proprietà "è collocata all'interno del"Linux-Details" classe:

.Linux-Details
display: griglia;
ALIGE-ITMS: CENTRO;
colonne a griglia-template: 1fr 1fr;
colonna-gap: 5px;

IL "Linux-Details"Allegamera sono assegnate le seguenti proprietà:

• "Schermo"Proprietà con il valore assegnato come"griglia"Fornisce un layout contenente righe e colonne.
• "allineare"Con il valore"centro"Posto viene utilizzato per posizionare l'elemento al centro.
• "colonne a griglia"Proprietà con il valore"1fr 1fr"Fornisce due colonne di una frazione ciascuna.
• "colonna-gap"La proprietà aggiunge spazio tra le colonne.

Elemento "img" di stile

img
Licromra massima: 100%;
Max-Height: 100%;

IL ""L'elemento è fornito le proprietà di seguito:

• "larghezza massima"La proprietà determina la larghezza massima dell'elemento.
• "altezza massima"Definisce l'altezza massima dell'elemento.

Produzione

Metodo 3: come avere immagine e testo fianco a fianco usando la proprietà "flex"?

Il CSS "flettere"La proprietà colloca gli elementi di fila (per impostazione predefinita).

Classe "Linux-Details" di stile

.Linux-Details
display: flex;
ALIGE-ITMS: CENTRO;
giustificare contento: centro;
imbottitura: 5%;

Ecco la spiegazione delle proprietà sopra menzionate:

• "Schermo"Proprietà con il valore"flettere"Posizionerà il""Il contenuto dell'elemento di fila.
• "allineare"Allinea gli articoli flessibili in verticale.
• "giustificare il contenuto"Imposta l'allineamento dell'oggetto flessibile in orizzontale.

Classe "testo" di stile

.testo
Font-size: 20px;
imbottitura-sinistra: 20px;

IL "testo"La classe è disegnata utilizzando le seguenti proprietà:

• "dimensione del font"La proprietà imposta le dimensioni del carattere.
• "imbottitura-sinistra"Aggiunge spazio a sinistra del testo.

Produzione

Si trattava di avere un'immagine e un testo fianco a fianco usando proprietà diverse.

Conclusione

Diverse proprietà possono essere utilizzate per posizionare un'immagine e un testo fianco a fianco su un sito Web. Le proprietà più comunemente usate sono "galleggiante","griglia", E "flettere". Per fare ciò, crea un ""Container. Aggiungi altri due elementi "" per l'immagine e il testo. Quindi, applica una delle proprietà menzionate al tag "" principale per le regolazioni della posizione dell'immagine e del testo. Questo blog ha spiegato varie proprietà per posizionare un'immagine e un testo fianco a fianco.