No HTML, as imagens são usadas para fins diferentes e geralmente são exibidas na forma vertical separadamente. No entanto, às vezes, pode ser necessário colocar imagens lado a lado para criar um layout elegante ou cumprir qualquer outro objetivo de desenvolvimento da Web.

Neste artigo, discutiremos como colocar dois divs lado a lado no CSS usando:

• flutuador
• grade
• flex

Vamos começar!

Método 1: Coloque dois divs lado a lado no CSS usando o Float

No CSS, o “flutuador”Propriedade especifica a direção flutuante de um elemento. Coloca um elemento no lado direito ou esquerdo do recipiente, permitindo que os elementos embutidos e de texto envolvam em torno dele.

Sintaxe

A sintaxe da propriedade Float é:

Float: Nenhum | esquerda | direita

Aqui está a descrição relacionada ao valor acima mencionado da propriedade Float:

• nenhum: É usado para não flutuar.
• esquerda: É usado para flutuar elementos no lado esquerdo.
• certo: É usado para flutuar elementos no lado direito.

Usando o “flutuador”Propriedade, você também pode colocar imagens lado a lado. Vamos mudar para o exemplo de colocar imagens lado a lado.

Exemplo 1: Colocando duas imagens lado a lado usando a propriedade Float

Aqui, adicionamos um título usando

e criou duas divs e atribuiu as fontes de imagem a ele.

Html

Coloque as imagens lado a lado usando o CSS Float

No CSS, usaremos “.div”Para acessar as duas divs que criamos no arquivo html. Em seguida, atribua o valor da propriedade Float como “esquerda”. Como resultado, o efeito será aplicado a ambos os nossos recipientes.

CSS

.div
flutuar: esquerda;

Como você pode ver, colocamos com sucesso as imagens lado a lado:

Exemplo: Coloque duas imagens lado a lado com o espaço

Se você deseja criar espaço entre essas duas imagens e colocá -las lado a lado, use o “largura”Propriedade e atribua um valor a ele.

Aqui, atribuiremos o valor da propriedade de largura como “300px”:

.div
flutuar: esquerda;
Largura: 300px;

Salve o código fornecido e confira os resultados:

Método 2: Coloque as imagens lado a lado no CSS usando a grade

Para colocar duas ou mais de duas imagens lado a lado “grade”O layout é usado. Basicamente, a grade é um valor da propriedade de exibição usada para criar um layout que consiste em linhas e colunas.

Sintaxe

A sintaxe da propriedade Display com layout da grade é dada da seguinte forma:

Exibição: grade;

Vamos mudar para o exemplo.

Exemplo

Aqui, criaremos quatro sub -divs dentro dos principais nomes de div como “pai”E adicione imagens a ele usando tag.

Html

Coloque as imagens lado a lado usando a grade CSS

Em seguida, na seção CSS, usaremos o “.pai”Para acessar o Div pai e definir o valor da propriedade de exibição como“grade”. Depois disso, definiremos a fração usando o “colunas de grade-templatePropriedade para criar espaço para colunas. Especificando “1fr”Três vezes criará“três”Colunas, o que significa que todas as divs têm espaço igual. Além disso, definiremos a lacuna entre as colunas usando a propriedade de gap de coluna e definiremos seu valor como “5px”:

.pai
Exibição: grade;
colunas da grade-template: 1fr 1fr 1fr;
coluna Gap: 5px;

Depois de concluir o código CSS, execute o arquivo HTML e verifique a saída:

Método 3: Coloque duas imagens lado a lado no CSS usando o Flex

O "flex”É o valor da propriedade de exibição que permite colocar os elementos lado a lado. Nesse cenário, os elementos serão definidos de acordo com a visualização da tela de exibição.

Sintaxe

A sintaxe da propriedade Display com Flex é:

exibição: flex;

Vamos passar para o exemplo:

Exemplo

Consideraremos o arquivo HTML anterior e adicionaremos três sub -divs dentro da div e especificará fontes de imagens diferentes:

Coloque as imagens lado a lado usando o CSS Flex

No CSS, defina o valor da propriedade de exibição como “flex”E defina o espaço de coluna como“5px”:

.pai
exibição: flex;
Gap: 5px;

Isso dará o seguinte resultado:

Fornecemos três maneiras simples de colocar imagens lado a lado em HTML e CSS.

Conclusão

As imagens são colocadas lado a lado usando três métodos diferentes de CSS, que são os “flex" e "grade”Valores da propriedade Display e o“flutuador" propriedade. O CSS também permite que você coloque o espaço ou a lacuna entre essas imagens adjacentes. Neste guia, discutimos esses três métodos em detalhes e fornecemos exemplos de cada método para colocar imagens lado a lado usando CSS.