Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

raonibz

Alinhamento justificado e responsivo de DIVs

Recommended Posts

Fala galera, beleza ?

 

Serei breve e claro, assim não fica muita coisa pra se ler, ok!?

 

Seguinte, me deparei com inúmeras formas de alinhamento justificado (espaçamentos iguais para todas laterais) de DIV, mas nenhum que ficasse legal também em mobile (testes no modo Galaxy S5 no Google Chrome).

 

A questão é o seguinte, precisam ser alinhadas as DIVs dentro da DIV pai, onde quando visto em desktop, notebooks, etc, fique justificado e quando em mobile, fique junto.

 

Para facilitar, segue código:

https://codepen.io/raonibz/pen/oxVyMy

 

Em modo mobile está OK, mas no desktop, precisava justificar as DIVs.

 

 

Abs.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tudo certo por ai?

 

Pelo que entendi, você está fazendo um layout responsivo, correto?

 

Você pode utilizar um "framework" para desenvolver isso, é mais prático e rápido do que fazer a mão. Recomendo o Bootstrap ou GetSkeleton.

Compartilhar este post


Link para o post
Compartilhar em outros sites

mano o que vc quer dizer com justificar as div's?

se for fazer com que elas preencham todo o espaço interno de uma div pai coloque o valor width em porcentagem

Ex:

 #boxes3 .boxes3-box {
  border: 2px green solid;
  display: inline-block;
  width: 32%;
  margin: 3px;
  padding: 45px;
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tudo certo por ai?

 

Pelo que entendi, você está fazendo um layout responsivo, correto?

 

Você pode utilizar um "framework" para desenvolver isso, é mais prático e rápido do que fazer a mão. Recomendo o Bootstrap ou GetSkeleton.

Opa ! beleza !?

Então cara, queria saber fazer manualmente, antes de usar qualquer framework, pois na hora que for usar até me facilita qualquer erro !

Mas agradeço a dica, vou dar uma fuçada no Bootstrap.

 

Abs !

Compartilhar este post


Link para o post
Compartilhar em outros sites

mano o que você quer dizer com justificar as div's?

se for fazer com que elas preencham todo o espaço interno de uma div pai coloque o valor width em porcentagem

Ex:

 #boxes3 .boxes3-box {
  border: 2px green solid;
  display: inline-block;
  width: 32%;
  margin: 3px;
  padding: 45px;
}

 

Justificar seria preencher por igual os espaços.

Não é o tamanho, são os espaços entre as DIVs, mas se coloco em porcentagem, em mobile fica ruim !

Compartilhar este post


Link para o post
Compartilhar em outros sites

Entendi.

Você teria que utilizar media queries então, para adaptar o layout conforme a resolução.

Da uma olhada nesse artigo: http://tableless.com.br/introducao-sobre-media-queries/

 

Qualquer coisa da um grito.

Abraço.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Entendi.

Você teria que utilizar media queries então, para adaptar o layout conforme a resolução.

Da uma olhada nesse artigo: http://tableless.com.br/introducao-sobre-media-queries/

 

Qualquer coisa da um grito.

Abraço.

 

Eu fiz um teste com media querie, praticamente funcionou, mas achei que poderia ter algo mais simples, pensando da mesma forma que tem a justificação de texto, fazer de DIV's !

Mas é isso aí ! vou deixar mais um pouco o tópico aberto para vermos se há mais algo, pois na internet se tem muitas pessoas procurando isso, mas nenhuma forma mais simples e praticamente nenhum exemplo funcionando.

 

Valeu galera ! Obrigado !

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.