0

Estou usando css para criar um novo visual de um relatório de aniversariantes no entanto, quando eu crio a estrutura não consigo que as divs internas ocupem todo o espaço da linha, não estão ocupando 50% como definido no estilo das classes. Coloquei background colorido para tentar entender o que ta pegando mas mesmo assim sem avanços.

Link com código no https://codepen.io/lucasldm/pen/bGdjOwg

Código do codepen abaixo:

<html>
<style>
  #wrapper {
    display: inline-block;<html>
<style>
  #wrapper {
    display: inline-block;
    width: 420px;
    text-align: center;
    backgroud: green;
  }

  .left {
    display: inline-block;
    width: 210px !important;
    float: left;
    background: yellow;
  }

  .right {
    display: inline-block;
    width: 210px;
    background: blue;
  }

  span {
    display: block;
  }
</style>

<body>
  <div style='width: 420px;'>
    <div style='font-size: 16px;float:left;border: 2px solid #B61111;padding:6px 50px 6px 50px;background-color: #B61111;color: white;text-align: center;width: 420px;'><a style='color: white;background-color: #B61111;padding: 2 6 2 6;'>Aniversariantes dos próximos 40 dias!</a></div>
    <div id='wrapper'>
      <div class='left'><span><img style='width: 80px; height: 86px; border-radius: 50% !important;' src="https://static.businessinsider.com/image/50db38a069bedd0d1000000c-750.jpg" /></span><span>Cassiano Gaivota</span><span style='text-transform: capitalize'>quinta-feira</span></div>
      <div class='right'><span><img style='width: 80px; height: 86px; border-radius: 50% !important;'></span><span>Jean Carlos Klann</span><span style='text-transform: capitalize'>terça-feira</span></div>
      <div class='left'><span><img style='width: 80px; height: 86px; border-radius: 50% !important;'></span><span>Fulano</span><span style='text-transform: capitalize'>Sexta-feira</span></div>
    </div><br /><br />
    <div style='font-size: 16px;float:left;border: 2px solid #B61111;padding:6px 50px 6px 50px;background-color: #B61111;color: white;text-align: center;width: 420px;'><a href='http://localhost/prod/' style='color: white;background-color: #B61111;padding: 2 6 2 6;'>Ir para o portal</a></div>
  </div>
</body>

</html>
    width: 420px;
    text-align: center;
    backgroud: green;
  }

  .left {
    display: inline-block;
    width: 210px !important;
    float: left;
    background: yellow;
  }

  .right {
    display: inline-block;
    width: 210px;
    background: blue;
  }

  span {
    display: block;
  }
</style>

<body>
  <div style='width: 420px;'>
    <div style='font-size: 16px;float:left;border: 2px solid #B61111;padding:6px 50px 6px 50px;background-color: #B61111;color: white;text-align: center;width: 420px;'><a style='color: white;background-color: #B61111;padding: 2 6 2 6;'>Aniversariantes dos próximos 40 dias!</a></div>
    <div id='wrapper'>
      <div class='left'><span><img style='width: 80px; height: 86px; border-radius: 50% !important;' src="https://static.businessinsider.com/image/50db38a069bedd0d1000000c-750.jpg" /></span><span>Cassiano Gaivota</span><span style='text-transform: capitalize'>quinta-feira</span></div>
      <div class='right'><span><img style='width: 80px; height: 86px; border-radius: 50% !important;'></span><span>Jean Carlos Klann</span><span style='text-transform: capitalize'>terça-feira</span></div>
      <div class='left'><span><img style='width: 80px; height: 86px; border-radius: 50% !important;'></span><span>Fulano</span><span style='text-transform: capitalize'>Sexta-feira</span></div>
    </div><br /><br />
    <div style='font-size: 16px;float:left;border: 2px solid #B61111;padding:6px 50px 6px 50px;background-color: #B61111;color: white;text-align: center;width: 420px;'><a href='http://localhost/prod/' style='color: white;background-color: #B61111;padding: 2 6 2 6;'>Ir para o portal</a></div>
  </div>
</body>

</html>

Alguém consegue me ajudar e explicar onde estou errando?

1 Resposta 1

2

Seu problema é que o valor dos padding estão se somando ao valor dos elementos, e os seus .left e .right estão como os tamanho corretos, o que não está "correto" é deixar o padding se somar a largura do elemento no seu caso, pois ele está com o próprio valor de 420px mais os paddings que vc deu nos demais elementos.

Sugiro fortemente que vc leia isso, vai te ajudar muito! Por que usar/não usar * box-sizing?

inserir a descrição da imagem aqui

Agora a solução, eu apenas usei a técnica de reset do padding, adicionado a todos os elementos box-sizing: border-box; como o seletor universal * { }, mas como falei leia o link acima para mais detalhes.

inserir a descrição da imagem aqui

OBS: Vc tinha escrito background errado por isso a cor verde não aparecia, e tb existem algumas tags abertas no seu código, deixei isso pra vc mesmo resolver...

Código corrigido abaixo:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

* {
    box-sizing: border-box;
  }
  
  #wrapper {
    display: inline-block;
    width: 420px;
    text-align: center;
    background: green;
  }

  .left {
    display: inline-block;
    width: 210px !important;
    float: left;
    background: yellow;
  }

  .right {
    display: inline-block;
    width: 210px;
    background: blue;
  }

  span {
    display: block;
  }
</style>

<body>
  <div style='width: 420px;'>
    <div style='font-size: 16px;float:left;border: 2px solid #B61111;padding:6px 50px 6px 50px;background-color: #B61111;color: white;text-align: center;width: 420px;'><a style='color: white;background-color: #B61111;padding: 2 6 2 6;'>Aniversariantes dos próximos 40 dias!</a></div>
    <div id='wrapper'>
      <div class='left'><span><img style='width: 80px; height: 86px; border-radius: 50% !important;' src="https://static.businessinsider.com/image/50db38a069bedd0d1000000c-750.jpg" /></span><span>Cassiano Gaivota</span><span style='text-transform: capitalize'>quinta-feira</span></div>
      <div class='right'><span><img style='width: 80px; height: 86px; border-radius: 50% !important;'></span><span>Jean Carlos Klann</span><span style='text-transform: capitalize'>terça-feira</span></div>
      <div class='left'><span><img style='width: 80px; height: 86px; border-radius: 50% !important;'></span><span>Fulano</span><span style='text-transform: capitalize'>Sexta-feira</span></div>
    </div><br /><br />
    <div style='font-size: 16px;float:left;border: 2px solid #B61111;padding:6px 50px 6px 50px;background-color: #B61111;color: white;text-align: center;width: 420px;'><a href='http://localhost/prod/' style='color: white;background-color: #B61111;padding: 2 6 2 6;'>Ir para o portal</a></div>
  </div>
</body>

</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .