Hola, quiero hacer algo en concreto con 4 divs y ya he probado diferentes soluciones pero ninguna se me adapta al resultado que yo busco.
Mi objetivo es tener un resultado "responsive" a la anchura del la ventana de la siguiente forma.
Tengo 4 divs con imágenes de 500px de ancho.
El objetivos es:
En una ventana mayor de 1000px de ancho que muestre dos filas de dos imagenes cada una, centradas entre ellas y con respecto a la ventana.
Si se agranda a más de 1500px que
NO "baje" la 4ª imagen quedando dos filas de 3 + 1 imágenes.
En una ventana mayor de 2000px que se muestre una sola fila con las 4 imágenes.
Si se reduce a menos de 1000px, que se apilen de una en una. 4 filas de 1 imagen cada una.
No pongo el código CSS que tengo porque he hecho cientos de pruebas y, o bien no consigo agruparlas como quiero, o bien no se centran al div que las contiene.
La idea básica es tener un div que lo contenga todo y se adapte a la ventana. width: 100%.
4 divs con las imágenes dentro. (Box1, box2, box3 y box4)
Luego dos divs "superior" e "inferior" para crear las dos filas en ventanas entre 1000px y 2000px.
Esta es la solución que he pensado para que nunca tenga una fila de 3 imágenes, ya que el superior albergará box1 y box2, mientras que el inferior albergará los divs box3 y box4.
el html que propongo es:
Código:
<body>
<div id="contenedor">
<div id="superior">
<div id="box1">
<imagen>
</div>
<div id="box2">
<imagen>
</div>
</div>
<div id="inferior">
<div id="box3">
<imagen>
</div>
<div id="box4">
<imagen>
</div>
</div>
</div>
</body>
¿Como hago que floten box1 y box3 a la izquierda dentro de su div superior o inferior pero que se mantengan centrados si su box "compañero" se "baja"?
Si me he pasado, lo siento, sigo buscando y si doy con la solución la compartiré.
Un saludo