Cómo mantener márgenes entre divs relativos en diferentes resoluciones de pantalla

Z

ZoroRoronoa

Delta

• 30 Dic 2014

• #1

Buenas colegas.

Miren, tengo 3 divs (circulos) con inline block.

Tengo el div "main" con un width del 80%, y adentro estos 3 divs.

Quiero que dependiendo a las diferentes resoluciones de pantallas, minimizando o maximizando la ventana, el margen entre estos 3 sea siempre equivalente.

Dejo unas pantallas de demostracion, las he editado, ya que con codigo no he podido conseguirlo.
minimizado o pantalla chica:

maximizado o pantalla grande:


Gracias.

 

lombervid

Zeta

Verificación en dos pasos activada

• 30 Dic 2014

• #2

Puedes usar un display flex y un justify-content de space-between.

 

Z

ZoroRoronoa

Delta

• 30 Dic 2014

• #3

Gracias Lombervid.

Buscando tu respuesta en la W3School, hice este test.

Lo que mas me agrado es que, si tengo 4 cajas de 100px en un espacio de 404px, los espacios en medio quedan, 1px | 2px | 1px.
Reparte los 2px al medio y no a un costado, creando buena vista para el usuario.

Codigo DEMO | codepen.io

Gracias.

 

Última edición: 30 Dic 2014

ZyOps

Dseda

Marketing

Verificado por Whatsapp

• 30 Dic 2014

• #4

Es simple, en vez de dejarle el 80%, cambialo por un 50% e igual si le añadiste un margin-left restale porcentaje testealo hasta que quede equivalente.

Reacuerda utilizar las etiquetas [MENTION=16931]medi[/MENTION]a screen and (min-width: valor)

 

lombervid

Zeta

Verificación en dos pasos activada

• 30 Dic 2014

• #5

Así es, se pueden hacer muchas cosas interesantes (y fácil) con display flex :encouragement:, solo que si quieres que tenga compatibilidad con mobiles recuerda poner sus prefijos (sobre todo el -webkit- para IOS y Android):

PHP:

display: flex;
display: -webkit-flex;
/* etc */

justify-content: space-between;
-webkit-justify-content: space-between;
/* etc */