Como colocar uma div ao lado de outra?

Q: Como colocar uma div ao lado de outra?

Você definiu todas as DIVs da sua página com o tamanho de 100px de largura e altura! Lembre-se, a configuração logo abaixo afeta todas as DIVs, inclusive a que você usará para envolver as duas DIVs coloridas! div { width: 100px; height: 100px; display: inline-block; } Como você esperava comportar duas DIVs de 100px cada (o que dá 200px ainda somados aos valores das margens) em uma única DIV de 100px? Consertei seu código. Peguei a sua configuração, joguei-a numa classe e usei essa classe apenas nas DIVs coloridas. <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <title></title> <style> .box { width: 100px; height: 100px; display: inline-block; } #div1 { background-color: blueviolet; } #div2 { background-color: maroon; } </style> </head> <body> <div> <div class="box" id="div1"></div> <div class="box" id="div2"></div> </div&g

12 de maio de 2022 1 resposta Resolvido

Ramon_Jales 12 de maio de 2022

tenho o seguinte código html:

<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>

e o seguinte código css:

div {
    width: 100px;
    height: 100px;
    display: inline-block;
}
#div1 {
    background-color: blueviolet;
}
#div2 {
    background-color: maroon;
}

as duas divs ficam uma ao lado da outra, mas quando eu coloco essas duas divs dentro de outra div, essa funcionalidade(inline-block) não funciona.

Gostaria de fazer um card principal para um site de noticias, onde teria uma foto e ao lado da foto o titulo, começo do texto etc… Como nos sites de notícias.
exemplo do site que quero: https://physics.aps.org/

1 Resposta

Solucao aceita

hmslima 15 de mai. de 2022 1 like

Você definiu todas as DIVs da sua página com o tamanho de 100px de largura e altura! Lembre-se, a configuração logo abaixo afeta todas as DIVs, inclusive a que você usará para envolver as duas DIVs coloridas!

div {
    width: 100px;
    height: 100px;
    display: inline-block;
}

Como você esperava comportar duas DIVs de 100px cada (o que dá 200px ainda somados aos valores das margens) em uma única DIV de 100px?

Consertei seu código. Peguei a sua configuração, joguei-a numa classe e usei essa classe apenas nas DIVs coloridas.

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            display: inline-block;
        }
        #div1 {
            background-color: blueviolet;
        }
        #div2 {
            background-color: maroon;
        }
    </style>
  </head>
  <body>
      <div>
          <div class="box" id="div1"></div>
          <div class="box" id="div2"></div>
      </div>
  </body>
</html>

Qualquer dúvida pode me perguntar.

Criado 12 de maio de 2022

Ultima resposta 15 de mai. de 2022

Respostas 1

Participantes 2

1 Resposta

Topicos relacionados