0

Boa tarde. Como posso fazer para que os itens fiquem no mesmo local independente da tela que for usada para a exibição? Uso uma tela de 14 polegadas, quando exibe a tela em uma tela maior, os itens ficam desalinhados.

#tudo {
  margin: 50px 0px 0px 23px;
}

.position_box {
  position: relative;
  width: 31%;
  height: 10%;
  background-color: #D9D9F3;
  float: left;
  margin-left: 20px;
  margin-bottom: 20px;
}

.estilo:hover {
  -webkit-transform: scale(1.15);
  -ms-transform: scale(1.15);
  transform: scale(1.15);
  -webkit-transition: 0.5s;
  z-index: 1;
  /*Faz o elemento ficar a cima dos outros*/
}

a:link,
a:visited,
a:active {
  text-decoration: none;
  color: #000;
}


/*a:hover {
            text-decoration: none;
            font-size: 113%;
            color: #000;
        }*/

.titulo {
  text-align: center;
  font-weight: bold;
  font-size: 14px;
}

.estilo_tab {
  position: absolute;
  padding-right: -30px;
  width: -60%;
  border-color: #000;
}

table td {
  font-size: 14.5px;
}
<div id="tudo">
  <a href="#">
    <div class="position_box estilo">
      <span class="titulo">
                <p>Teste</p>
            </span>
      <table>
        <p>Info</p>
        <p>Info</p>
        <p>Info</p>
      </table>
    </div>
  </a>

  <a href="#">
    <div class="position_box estilo">
      <span class="titulo">
                <p>Teste</p>
            </span>
      <table>
        <p>Info</p>
        <p>Info</p>
        <p>Info</p>
      </table>
    </div>
  </a>

  <a href="#">
    <div class="position_box estilo">
      <span class="titulo">
                <p>Teste</p>
            </span>
      <table>
        <p>Info</p>
        <p>Info</p>
        <p>Info</p>
      </table>
    </div>
  </a>
</div>

9
  • 1
    Desalinhado em que sentido? Não ficam centralizado na página na horizonta? Ou algum item fica maior que outro ou cai pra linha de baixo? Tente dar alguns detalhes a mais, e se possível coloque uma imagem de como está na sua Tela. Vc não tem que se preocupar se o monitor é 14polegadas ou 42polegadas, vc tem que se preocupar com a resolução de tela, se é HD ou 4K por exemplo, se o display é normal ou retina, isso que pode influenciar o layout, não o "tamanho" da tela entende...
    – hugocsl
    Commented 14/09/2018 às 15:43
  • Os tamanhos dos itens não mudam. Só que na minha tela de 14 ficam três itens em cima e três itens em baixo. Só que quando a tela é maior, ficam dois itens a cima ao invés de três, da quebra de linha. Commented 14/09/2018 às 15:45
  • Vc quer que sempre tenha 3 itens por linha independente da largura da tela?
    – hugocsl
    Commented 14/09/2018 às 15:48
  • Isso mesmo Hugo. Quero que exiba sempre 3 itens por linha. Commented 14/09/2018 às 15:49
  • Vc quer que sempre tenha 3 itens por linha independente da largura da tela? Na verdade a forma como vc construiu o layout está meio estranha... Div dentro de A e não A dentro da Div. Tabela como tag P e não TR/TD. Acho que antes de mais nada vc deveria para um pouquinha para dar uma estudada nos fundamentos básicos do HTML, aproveita que vc está começando e começa do jeito certo, tem muito material gratuito no Google e documentação disponível. É só uma dica, a intenção é te ajudar a pescar e não entregar o peixe e vc não conseguir se virar sozinho no futuro
    – hugocsl
    Commented 14/09/2018 às 15:52

0

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

Pesquise outras perguntas com a tag .