3 maneiras fáceis de colocar dois divs lado a lado no CSS

As divs são usadas principalmente para criar seções diferentes no HTML, que podem ser estilizadas de acordo com a ajuda do CSS. Às vezes, pode ser necessário colocar dois divs lado a lado para criar um layout elegante. Para esse fim, o CSS fornece vários métodos, como:

• Usando “grade”
• Usando “flex”
• Usando “flutuador”

Neste artigo, discutiremos cada uma das abordagens mencionadas uma a uma e forneceremos um exemplo adequado de cada método.

Então vamos começar!

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

O CSS “grade”O layout permite ao usuário colocar dois ou mais dois divs lado a lado. 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 abaixo:

Exibição: grade

Agora, vamos conferir um exemplo relacionado à colocação de dois divs lado a lado no CSS usando o layout da grade.

Exemplo

Aqui, criaremos dois filhos de crianças dentro da divis de pai, tendo os nomes de classe como “pai","criança" e "criança”:

Em seguida na seção CSS, use “.pai”Para acessar o Div pai e definir o valor da propriedade de exibição como“grade”. Em seguida, defina a fração usando o “colunas de grade-templatePropriedade para criar espaço para colunas. No nosso caso, definiremos frações como “1fr" e "1fr”, O que significa que ambos os divs adquiriram espaço igual. Além disso, definiremos a lacuna entre duas colunas usando a propriedade de gap de coluna e definiremos seu valor como “25px”.

CSS:

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

Na próxima etapa, usamos “.criança”Para acessar o Child Div e definir a altura dos divs como“250px”E defina a cor do fundo como“RGB (253, 5, 109)”:

.criança
Altura: 250px;
Antecedentes: RGB (253, 5, 109);

Isso mostrará o seguinte resultado:

Vamos mudar para outro método para colocar a div lado a lado

Método 2: Coloque dois divs lado a lado no CSS usando o Flex

O "flex”É o valor da propriedade de exibição que permite colocar dois divs lado a lado. Esta propriedade é usada para definir um comprimento flexível para o item flexível. Ele encolhe ou cresce o item flexível para caber em seu contêiner.

Sintaxe

A sintaxe da propriedade Display com Flex é dada abaixo:

exibição: flex;

Vamos passar para o exemplo para entender o conceito declarado.

Exemplo

Vamos considerar o mesmo arquivo html e aplicar “flex”Para o contêiner pai. Aqui, definiremos o valor da propriedade Display como Flex e definiremos a lacuna entre as crianças Divs como “10px”:

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

Depois disso, defina a largura, a altura e a cor do fundo da div como “650px","200px", e “RGB (0, 255, 42)”, Respectivamente:

.criança
Largura: 650px;
Altura: 200px;
Antecedentes: RGB (0, 255, 42);

O resultado do código fornecido é dado abaixo:

Método 3: Coloque dois divs lado a lado no CSS usando float

A propriedade Float CSS especifica a direção flutuante de um elemento. Mais especificamente, esta propriedade pode ser utilizada para colocar dois divs lado a lado em CSS.

Sintaxe

A sintaxe da propriedade Float é:

Float: Nenhum | esquerda | direita

Aqui está a descrição dos valores acima:

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

Vamos passar para o exemplo de colocar a div lado a lado.

Exemplo

Agora, criaremos dois divs dentro da tag e atribuiremos o nome da classe como “Div1" e "div2”:

Então, use “.Div1" e ".div2”Para acessar os recipientes adicionados na seção HTML. Usaremos os dois divs na mesma classe, porque as propriedades e os valores que vamos atribuir a ambos são os mesmos.

Em seguida, atribuímos o valor da propriedade Float como “esquerda”E defina a largura e a altura da div como“50%" e "40%”. Também usamos a propriedade de tamanho de caixa e definimos seu valor como “Border-box”. Além disso, defina a cor de fundo da div como “RGB (7, 255, 222)”E defina os valores da propriedade de fronteira como“3px","sólido", e "RGB (255, 0, 255)”:

.Div1, .div2
flutuar: esquerda;
largura: 50%;
Altura: 40%;
Timing de caixa: caixa de fronteira;
Antecedentes: RGB (7, 255, 222);
borda: 3px RGB sólido (255, 0, 255);

Observação: Você pode colocar dois divs lado a lado sem usar propriedades de tamanho de caixa e propriedades de fronteira, definindo as diferentes cores de fundo dos divs.

Depois de implementar o código acima, execute o arquivo HTML e veja o resultado:

Observação: Para criar uma lacuna entre dois divs, primeiro crie outra div e depois defina a margem da divindra.

Conclusão

As divs podem ser 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. Cada um dos métodos funciona com eficiência; No entanto, você pode utilizar qualquer um deles de acordo com nossos requisitos. Neste guia, discutimos três métodos para colocar a div lado a lado usando CSS e fornecemos exemplos relacionados.