Los gráficos e imágenes hacen que las páginas web sean más fáciles de usar. Además, las imágenes llaman la atención del usuario y ayudan a diseñar o diseñar la aplicación. La aplicación que tiene más imágenes obtiene más vistas. Además, hay varias formas de ajustar las posiciones de la imagen en CSS, como el uso de Flexbox, Grid, Propiedades de flotación y muchas más.

La redacción discutirá diferentes métodos para tener imágenes y texto uno al lado del otro en HTML.

Prerrequisito: cree un archivo HTML

Antes de moverse al tema principal de la publicación, siga las instrucciones a continuación para crear un archivo HTML:

• Agrega un ""Elemento y nombre su clase"Linux-Details".
• Agregue dos "" elementos infantiles dentro del "" para la imagen y el texto respectivamente. Asignar el ""Etiqueta una clase"Linux-IMG" y el "

  "Etiqueta con la clase"texto".

• Ajuste el tamaño de la fuente "

  "Etiqueta utilizando el"tamaño de fuente" propiedad.

• Incluir algún texto dentro del "

  " etiqueta.

Html

Linuxhint

Videos de calidad, mejores artículos

Método 1: Cómo tener imagen y texto uno al lado del otro usando la propiedad "flotante"?

El CSS "flotar"La propiedad se utiliza para determinar la posición del elemento, ya sea que esté flotando hacia la izquierda o hacia la derecha o ninguno. Un elemento flotado estará rodeado por los elementos al lado.

Clase de estilo "Linux-Details"

Para hacerlo, primero, diseñe el "Linux-Details"Clase asignando las siguientes propiedades:

.Linux-Details
Ancho: 80%;
relleno: 1%;

El ".Linux-Details"Se usa para acceder al contenedor creado. Esta clase se aplica luego con las propiedades explicadas a continuación:

• "ancho"Determina el ancho del elemento.
• "relleno"Asigna espacio alrededor del contenido del elemento.

Clase de estilo "Linux-IMG"

El CSS "flotar"La propiedad se agrega dentro del"Linux-IMGClase para ajustar la posición de la imagen:

.Linux-IMG
Altura: 150px;
Ancho: 150px;
margen-izquierda: 30%;
flotador izquierdo;

Aquí:

• "altura"Ajusta la altura del elemento.
• "margen de pesa"Agrega algo de espacio al lado izquierdo del elemento.
• "flotar"Propiedad con el valor"izquierda"Flota la imagen a la izquierda. Como resultado, el contenido de texto al lado se colocará después de él.

Producción

Método 2: Cómo tener imagen y texto uno al lado del otro usando la propiedad "cuadrícula"?

El CSS "red"La propiedad proporciona una forma más simple de diseñar un diseño de sitio web que proporcione filas y columnas.

Clase de estilo "Linux-Details"

Ahora el "red"La propiedad se coloca dentro del"Linux-Details" clase:

.Linux-Details
Pantalla: cuadrícula;
Alineación de ítems: Centro;
Columnas de plantilla de cuadrícula: 1fr 1fr;
columna-gap: 5px;

El "Linux-DetailsSe asigna a la clase las siguientes propiedades:

• "mostrar"Propiedad con el valor asignado como"red"Proporciona un diseño que contiene filas y columnas.
• "ítems alineados"Con el valor"centro"Colocado se usa para colocar el elemento en el centro.
• "columnas de plantilla de cuadrícula"Propiedad con el valor"1fr 1fr"Proporciona dos columnas de una fracción cada uno.
• "brecha de columna"La propiedad agrega espacio entre las columnas.

Elemento de estilo "img"

img
Máxido: 100%;
Max-altura: 100%;

El "El elemento se proporciona las propiedades mencionadas a continuación:

• "anchura máxima"La propiedad determina el ancho máximo del elemento.
• "Altura máxima"Define la altura máxima del elemento.

Producción

Método 3: Cómo tener imagen y texto uno al lado del otro usando la propiedad "Flex"?

El CSS "doblarLa propiedad coloca los elementos en una fila (por defecto).

Clase de estilo "Linux-Details"

.Linux-Details
Pantalla: Flex;
Alineación de ítems: Centro;
Justify-Content: Center;
relleno: 5%;

Aquí está la explicación de las propiedades mencionadas anteriormente:

• "mostrar"Propiedad con el valor"doblar"Colocará el""El contenido del elemento consecutivo.
• "ítems alineados"Alinea los artículos flexibles verticalmente.
• "Justify-Content"Establece la alineación del elemento flexible horizontalmente.

Clase de estilo "Texto" de estilo

.texto
tamaño de fuente: 20px;
RODING-LUFE: 20px;

El "textoLa clase se diseña utilizando las siguientes propiedades:

• "tamaño de fuenteLa propiedad establece el tamaño de la fuente.
• "pesadilla"Agrega espacio a la izquierda del texto.

Producción

Eso se trataba de tener una imagen y un texto uno al lado del otro usando diferentes propiedades.

Conclusión

Se pueden utilizar varias propiedades para colocar una imagen y un texto uno al lado del otro en un sitio web. Las propiedades más utilizadas son "flotar","red", y "doblar". Para hacerlo, cree un "" envase. Agregue dos elementos más "" para la imagen y el texto. Luego, aplique una de las propiedades mencionadas a la etiqueta principal "" para los ajustes de posición de imagen y texto. Este blog ha explicado varias propiedades para colocar una imagen y un texto lado a lado.