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 duas Divs lado a lado em CSS usando grade
O CSS “ rede ” permite que o usuário coloque duas ou mais duas divs lado a lado. Basicamente, a grade é um valor da propriedade display usada para criar um layout composto por linhas e colunas.
Sintaxe
A sintaxe da propriedade de exibição com layout de grade é fornecida abaixo:
exibição: grade
Agora, vamos conferir um exemplo relacionado a colocar duas divs lado a lado em CSS usando o layout de grade.
Exemplo
Aqui, vamos criar duas divs filhas dentro da div pai, tendo os nomes das classes como “ pai ”, “ filho ' e ' filho ”:
< div classe = 'pai' >< div classe = 'filho' >< / div >
< div classe = 'filho' >< / div >
< / div >
Em seguida, na seção CSS, use “ .pai ” para acessar o div pai e definir o valor da propriedade display como “ rede ”. Em seguida, defina a fração usando o “ grid-template-colunas ” para criar espaço para colunas. No nosso caso, vamos definir frações como “ 1fr ' e ' 1fr ”, o que significa que ambas as divs adquiriram espaço igual. Além disso, definiremos o intervalo entre duas colunas usando a propriedade column-gap e definiremos seu valor como “ 25px ”.
CSS:
.pai {exibição : rede ;
grid-template-colunas : 1fr 1fr ;
lacuna de coluna : 25px ;
}
Na próxima etapa, usamos “ .filho ” para acessar o div filho e definir a altura dos divs como “ 250px ” e defina a cor de fundo como “ rgb(253, 5, 109) ”:
.filho {altura : 250px ;
fundo : rgb ( 253 , 5 , 109 ) ;
}
Isso mostrará o seguinte resultado:
Vamos passar para outro método para colocar div lado a lado
Método 2: Coloque duas Divs lado a lado em CSS usando flex
O ' flexionar ” é o valor da propriedade display que permite colocar duas divs lado a lado. Esta propriedade é usada para definir um comprimento flexível para o item flexível. Ele reduz ou aumenta o item flexível para caber em seu contêiner.
Sintaxe
A sintaxe da propriedade display com flex é dada abaixo:
exibição: flexível;Vamos passar para o exemplo para entender o conceito declarado.
Exemplo
Vamos considerar o mesmo arquivo HTML e aplicar “ flexionar ” para o contêiner pai. Aqui, vamos definir o valor da propriedade display como flex e definir o intervalo entre as divs filhas como “ 10px ”:
.pai {exibição : flexionar ;
Gap = Vão : 10px ;
}
Depois disso, defina a largura, altura e cor de fundo da div como “ 650px ”, “ 200px ', e “rgb(0, 255, 42) ”, respectivamente:
.filho {largura : 650px ;
altura : 200px ;
fundo : rgb ( 0 , 255 , 42 ) ;
}
O resultado do código fornecido é dado abaixo:
Método 3: Coloque duas Divs lado a lado em CSS usando float
A propriedade CSS float especifica a direção flutuante de um elemento. Mais especificamente, esta propriedade pode ser utilizada para colocar duas divs lado a lado em CSS.
Sintaxe
A sintaxe da propriedade float é:
float: nenhum|esquerda|direitaAqui está a descrição para os valores fornecidos acima:
- Nenhum: É usado para restringir a flutuação.
- deixei: É usado para flutuar elementos no lado esquerdo.
- certo: Ele é usado para flutuar elementos no lado direito.
Vamos passar para o exemplo de colocar div lado a lado.
Exemplo
Agora, vamos criar duas divs dentro da tag
e atribuir o nome da classe como “ div1 ' e ' div2 ”: < corpo >< div classe = 'div1' >< / div >
< div classe = 'div2' >< / div >
< / corpo >
Em seguida, use “ .div1 ' e ' .div2 ” para acessar os contêineres adicionados na seção HTML. Usaremos os dois divs na mesma classe porque as propriedades e os valores que atribuiremos a ambos são os mesmos.
Em seguida, atribuímos o valor da propriedade float como “ deixei ” e defina a largura e a altura da div como “ cinquenta% ' e ' 40% ”. Também usamos a propriedade box-sizing e definimos seu valor como “ caixa de borda ”. Além disso, defina a cor de fundo do div como “ rgb(7, 255, 222) ” e defina os valores da propriedade border como “ 3px ”, “ sólido ', e ' rgb(255, 0, 255) ”:
.div1 , .div2 {flutuador : deixei ;
largura : cinquenta% ;
altura : 40% ;
dimensionamento de caixa : caixa de borda ;
fundo : rgb ( 7 , 255 , 222 ) ;
fronteira : 3px sólido rgb ( 255 , 0 , 255 ) ;
}
Observação: Você pode colocar duas divs lado a lado sem usar a propriedade box-sizing e a propriedade border definindo as diferentes cores de fundo das divs.
Depois de implementar o código acima, execute o arquivo HTML e veja o resultado:
Observação: Para criar uma lacuna entre duas divs, primeiro crie outra div e, em seguida, defina a margem da div de acordo.
Conclusão
Divs podem ser colocadas lado a lado usando três métodos diferentes de CSS, que são o “ flexionar ' e ' rede ” valores da propriedade display e o “ flutuador ' propriedade. Cada um dos métodos funciona de forma eficiente; no entanto, você pode utilizar qualquer um deles de acordo com nossos requisitos. Neste guia, discutimos três métodos para colocar div lado a lado usando CSS e fornecemos exemplos relacionados.