Gráficos e imagens tornam as páginas da web mais amigáveis. Além disso, as imagens chamam a atenção do usuário e ajudam a modelar ou projetar o aplicativo. O aplicativo com mais imagens recebe mais visualizações. Além disso, existem várias maneiras de ajustar as posições da imagem em CSS, como usar Flexbox, Grid, Float Properties e muito mais.

A redação discutirá diferentes métodos para ter imagens e texto lado a lado em html.

Pré -requisito: Crie um arquivo HTML

Antes de passar para o assunto principal da postagem, siga as instruções abaixo do ritmo para criar um arquivo HTML:

• Adicione um “”Elemento e nomeie sua classe“Linux-Details”.
• Adicione dois "" elementos filhos no principal "" para imagem e texto, respectivamente. Atribua o “”Tag uma classe“Linux-IMG" e a "

  ”Tag com a classe“texto”.

• Ajuste o tamanho da fonte “

  ”Tag utilizando o“tamanho da fonte" propriedade.

• Inclua algum texto no “

  " marcação.

Html

Linuxhint

Vídeos de qualidade, melhores artigos

Método 1: Como ter imagem e texto lado a lado usando a propriedade "Float"?

O CSS “flutuador”A propriedade é utilizada para determinar a posição do elemento, seja flutuada para a esquerda ou direita ou nenhum. Um elemento flutuado será cercado pelos elementos ao lado dele.

Classe de estilo “Linux-Details”

Para fazer isso, primeiro, estilize o “Linux-Details”Classe atribuindo as seguintes propriedades:

.Linux-Details
largura: 80%;
preenchimento: 1%;

O ".Linux-Details”É usado para acessar o contêiner criado. Esta classe é então aplicada com as propriedades abaixo explicadas:

• ““largura”Determina a largura do elemento.
• ““preenchimento”Aloca espaço em torno do conteúdo do elemento.

Classe de estilo “Linux-IMG”

O CSS “flutuador”A propriedade é adicionada no“Linux-IMGClasse para ajustar a posição da imagem:

.Linux-IMG
Altura: 150px;
Largura: 150px;
margem-esquerda: 30%;
flutuar: esquerda;

Aqui:

• ““altura”Ajusta a altura do elemento.
• ““margem-esquerda”Adiciona algum espaço ao lado esquerdo do elemento.
• ““flutuador”Propriedade com o valor“esquerda”Flutua a imagem à esquerda. Como resultado, o conteúdo de texto ao lado será colocado depois dele.

Saída

Método 2: Como ter imagem e texto lado a lado usando a propriedade "grade"?

O CSS “grade”Propriedade fornece uma maneira mais simples de projetar um layout de site, fornecendo linhas e colunas.

Classe de estilo “Linux-Details”

Agora o "grade”A propriedade é colocada dentro do“Linux-Details" aula:

.Linux-Details
Exibição: grade;
alinhado-itens: centro;
colunas de grade-template: 1fr 1fr;
coluna Gap: 5px;

O "Linux-Details”A classe recebe as seguintes propriedades:

• ““mostrar”Propriedade com o valor atribuído como“grade”Fornece um layout contendo linhas e colunas.
• ““alinhado-itens"Com o valor"Centro”Lampado é usado para colocar o elemento no centro.
• ““colunas de grade-template”Propriedade com o valor“1fr 1fr”Fornece duas colunas de uma fração cada.
• ““Gap de coluna”A propriedade adiciona espaço entre as colunas.

Elemento de estilo “img”

img
MAX-LUDA: 100%;
MAX-HEUTH: 100%;

O "”O elemento recebe as propriedades abaixo mencionadas:

• ““largura máximaA propriedade determina a largura máxima do elemento.
• ““altura máxima”Define a altura máxima do elemento.

Saída

Método 3: Como ter imagem e texto lado a lado usando a propriedade "flex"?

O CSS “flex”Propriedade coloca os elementos seguidos (por padrão).

Classe de estilo “Linux-Details”

.Linux-Details
exibição: flex;
alinhado-itens: centro;
Justify-Content: Center;
preenchimento: 5%;

Aqui está a explicação das propriedades mencionadas acima:

• ““mostrar”Propriedade com o valor“flex"Vai colocar o""Conteúdo do elemento consecutivo.
• ““alinhado-itens”Alinham os itens flexíveis verticalmente.
• ““Justify-Content”Define o alinhamento do item flexível horizontalmente.

Classe de “texto” de estilo

.texto
Size da fonte: 20px;
Potding-Left: 20px;

O "texto”A classe é estilizada utilizando as seguintes propriedades:

• ““tamanho da fonte”Propriedade define o tamanho da fonte.
• ““preenchimento-esquerda”Adiciona espaço à esquerda do texto.

Saída

Isso se tratava de ter uma imagem e um texto lado a lado usando diferentes propriedades.

Conclusão

Várias propriedades podem ser utilizadas para colocar uma imagem e texto lado a lado em um site. As propriedades mais usadas são “flutuador","grade", e "flex”. Para fazer isso, crie um “”Contêiner. Adicione mais dois elementos "" para a imagem e texto. Em seguida, aplique uma das propriedades mencionadas à tag principal “” para os ajustes de imagem e posição do texto. Este blog explicou várias propriedades para colocar uma imagem e texto lado a lado.