CSS dois divs lado a lado
Métodos para colocar dois divs lado a lado
Existem cinco métodos diferentes disponíveis no CSS para colocar os dois divs lado a lado:
- Exibição: Método em linha em linha
- Exibição: Método da tabela
- Método Float CSS
- Método CSS Flexbox
- Método da grade CSS
Exemplo #1: Usando a exibição: método em linha embutida
Iniciamos nosso código HTML abrindo um novo arquivo no código do Visual Studio e depois selecionando a linguagem HTML. O arquivo é criado aqui. Nós colocamos o “!”Marque para obter as tags básicas. Então, quando pressionamos "Enter", todas as tags básicas do HTML aparecerão no arquivo.
Começamos nossa codificação da parte do corpo. Colocamos um título e duas divs diferentes aqui. Colocamos essas duas divs lado a lado usando a propriedade "Display: Inline-Block" no CSS. Neste arquivo html, também vinculamos o arquivo CSS antes do corpo e dentro da "cabeça". Agora, vá para o arquivo CSS e veja como usamos essa propriedade para colocar esses dois divs lado a lado.
Aqui, depois de mencionar o nome da div, abrimos os aparelhos encaracolados. Dentro desses aparelhos encaracolados, usamos a propriedade "Display" do CSS. Devemos colocar o "bloqueio em linha" como o valor desta propriedade "Display". Esta propriedade "Display: Inline Block" nos ajuda a colocar dois divs, um após o outro. Esta propriedade "Display: Inline Block" não fornece a "altura" e a "largura", então, temos que mencionar as propriedades separadas para definir a "altura" e "largura". Definimos a largura de ambas. Definimos a altura dos dois divs como "100px". O "fundo" desses dois divs é "rosa". A “borda” que criamos aqui para ambos os divs é “2px” em largura, “roxo” em cores e no tipo “sólido”. Enquanto escrevemos algum texto dentro dessas divs, definimos o texto no "centro" do div usando a propriedade "Text-align". Também definimos o “tamanho da fonte” para “24px” e a “família da fonte” para “argelino”.
Na saída, ambas as divs são colocadas lado a lado porque usamos o método "Display: Inline Block" nessas divs. Ambos os divs são renderizados aqui um após o outro.
Exemplo #2: Usando o método de exibição: tabela
Neste exemplo, temos um título e criamos dois divs com o nome "Tabela-Cell" dentro dos divs principais que são os "contêiner" e "tabela" divs. Utilizamos o visor: propriedade da tabela em CSS para renderizar os dois divs lado a lado.
Começamos com o estilo do cabeçalho. O "estilo de fonte" que usamos aqui para o título é "itálico". A "cor" que utilizamos aqui para o título é "marrom". E a “família de fontes” que usamos é “argeliano”. Então, temos a classe de "contêiner" da div. Usamos a propriedade "Display: Table" aqui, para que ele exiba os dois divs lado a lado. Definimos a "largura" como "40%". Então, para a “linha da tabela”, utilizamos a propriedade “Display” novamente, mas aqui, colocamos a “linha da tabela” como seu valor e sua “altura” é definido como “130px”.
Em seguida, passamos para a divisão “célula de mesa” e estabelecemos algumas propriedades aqui para esses dois divs. Criamos uma fronteira para ambos os divs utilizando a propriedade "fronteira". Esta borda está definida como "2px" para sua largura, "sólida" para o seu tipo e "marrom" para sua cor. Depois disso, definimos seu "fundo" para tornar esses divs atraentes e usar uma cor de "salmão leve" para esta propriedade. Também definimos a "exibição" aqui como a "célula de mesa". O "preenchimento" que usamos aqui é "2px". Além disso, temos algum texto nas divs. Aplicamos algum estilo no texto aqui. A “família de fontes” do texto é “argeliana” e seu “tamanho de fonte” é “25px”. Alinhamos esses textos ao "centro".
Ao aplicamos o método "Display: Table" nessas divs, elas aparecem lado a lado na saída. Ambos os divs são renderizados um ao lado do outro.
Exemplo #3: Usando o método Float
Aqui, após o título, temos uma div principal chamada "contêiner" e colocamos as duas divs diferentes dentro desta div. Criamos uma div com o nome "ST-box" e a outra div chamada "ND-Box". Também colocamos os parágrafos dentro de cada div, exceto a div principal. Usaremos a propriedade CSS Float para definir ambos os divs lado a lado.
Definimos a “largura” e “altura” da “contêiner”, colocando os valores “400px” e “190px”, respectivamente. A “cor de fundo” do contêiner é “verde”. O "top de preenchimento" é "20px" e o "preenchimento-esquerda" e "acolchoado" estão definidos como "15px" cada. Agora, definimos a divisão "ST-Box" e usamos a propriedade "Float". Aqui, configuramos para “esquerda”.
A "largura" e "altura" são "180px" e "160px", respectivamente. A “cor de fundo” desta divisão “ST-box” é “branca” com uma borda de cor “preta” no tipo “sólido”. O "tamanho da fonte" para o parágrafo que escrevemos nesta div é "18px". As propriedades da DIV “ND-Box” são as mesmas da Div “ST-Box” que já explicamos aqui. A única nova propriedade que acrescentamos aqui é a propriedade "Margin-left" e a definimos como "20px". Também estilizamos o cabeçalho um pouco mudando sua “cor” para “verde”. O “Times New Roman” é selecionado aqui como a “família da fonte”.
Você pode ver nesta captura de tela que os dois divs aparecem aqui lado a lado dentro da div principal. Usamos a propriedade "flutuante" neste exemplo para colocar os dois divs um após o outro.
Exemplo #4: Usando o método Flexbox
Temos uma div principal chamada "Flex-container" que contém dois divs separados. Exceto pela div, inserimos alguns parágrafos dentro de cada div. Ambas as divs serão colocadas lado a lado usando o método CSS Flexbox neste exemplo.
Alinhamos o cabeçalho no "centro" e definimos a "família da fonte" para "argelino". Mencionamos o "Flex-container" e colocamos a propriedade "Display: Flex" dentro. Colocamos essa propriedade no contêiner para que a propriedade "flex" coloque o elemento filho em um contexto flexível e alinhe os divs um ao lado do outro. Para o “filho flexível”, colocamos “flex” e damos “1” como seu valor. Criamos a fronteira em torno de cada div, utilizando a propriedade "fronteira" e configurando -a como tipo sólido "vermelho". Definimos o "tamanho da fonte" do parágrafo, que está escrito dentro dos divs para "20px". O "Margin-Right" do "Flex-Child: First-Child" é definido aqui como "20px".
Esses divs aparecem lado a lado na saída porque usamos a propriedade "Flexbox" neste exemplo. Ambas as divs são mostradas lado a lado.
Conclusão
Criamos este guia para ajudá -lo a entender as propriedades do CSS que ajudam a colocar dois divs lado a lado. Este guia passou por este tópico em profundidade. Passamos pelos métodos que são usados para colocar dois divs lado a lado no CSS. Explicamos que existem cinco propriedades para colocar dois divs lado a lado. Examinamos quatro casos diferentes em que usamos as quatro propriedades do CSS para definir os dois divs lado a lado e fornecemos as saídas para que você possa ver como essas propriedades funcionam. Espero que você consiga descobrir quais propriedades do CSS são usadas para colocar o divs lado a lado no CSS e como usá -las por conta própria.