Foro de elhacker.net

Hola tengo estos divs:

(http://s2.subirimagenes.com/imagen/previo/thump_9356690div1.png)

Tienen los mismos elementos en cada uno. Hasta aquí todo bien pero luego al cambiar el height (display:none en un div dentro) de uno de los divs (el primero) se descoloca y se queda mas arriba

(http://s2.subirimagenes.com/imagen/previo/thump_9356697div1.png)

Yo quiero este resultado:

(http://s2.subirimagenes.com/imagen/previo/thump_9356700div1.png)

Con float: left los dos primeros se quedan bien pero el tercero no esta al lado del primero sino mas abajo y tampoco lo puedo usar porque utilizo el contenido de estos divs para el height del padre.
Alguna idea?

Un saludo

Podrías poner los 2 divs de la izquierda dentro de otro div :o

float right? xD!

(PD: es broma)

So, yo creo que tendras que acudir a hacer lo que dijo ivancea, o hacer magia con transform, pero la verdad es que de otra manera lo veo muy dificil si solo usas css puro

Si los elementos tienen diferentes tamaños podes usar flex..

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Si no existen soluciones en js como..

http://packery.metafizzy.co/

No puedo porque el usuario es el que genera todo el contenido.


Existe flex con display block de modo de poder usar elementos con position: absolute dentro del div con flex ?

La librería es perfecta  :D

Gracias

Yo lo haría con FlexLayout. Puedes ver éste JsFiddle (http://jsfiddle.net/wLe36cnq/2/) que te preparé. Clickea el cuadro azul para que se vuelva más pequeño, y luego vuélvelo a clickear para que se restablezca su tamaño.

Saludos.

No veo por que no seria posible..

https://jsfiddle.net/dmh0341L/

Me confundí con lo de position: absolute  :rolleyes:

Luego el ejemplo de Gus Garsaky esta perfecto pero no consigo adaptarlo a mis divs.
Con en el padre:

display: flex;
flex-flow: column wrap;
align-items: flex-start;

Resultado:

(http://s2.subirimagenes.com/imagen/previo/thump_9357664div1.png)

Con:

display: flex;
flex-flow: row wrap;
align-items: flex-start;

Resultado:

(http://s2.subirimagenes.com/imagen/previo/thump_9357676div1.png)

Quiero que el 3 suba hasta el 1 y el 4 se vaya a la izquierda si queda espacio.


En este fiddle -> http://jsfiddle.net/wLe36cnq/4/
Al disminuir de tamaño al azul el rojo debería de subir. ???

Gracias

Lo que pasa es que estás usando row en lugar de column. Mira éste nuevo JsFiddle (http://jsfiddle.net/nn2t6qxq/) que te hice. Clickea cualquier cuadro y se redimensionará, para que verás el flujo que toman las cajas.

Gracias por el ejemplo, pero yo quiero que cuando tienen el height pequeño se alinee al a derecha.

(http://s2.subirimagenes.com/imagen/previo/thump_9357780div1.png)

Y si hay mas divs que haga como columnas. Ya se que se puede conseguir agregando dos contenedores pero no es lo que quiero.
En tu fiddle funciona bien pero cuando los cuatro tienen el height pequeno se queda como una fila.

Buen resultado
(http://s2.subirimagenes.com/imagen/previo/thump_9357784div1.png)

No creo que flexbox te sirva en ese caso. Yo me imagino que quieres tener algo como:


Si es asi, no creo que flexbox te ayude para eso.


Necesitas tener un height apropiado para que haga el wrapping.

Si como dijo MinusFour, exactamente eso no podras si aun que le cambies propiedad row habra espacios y con column no se organizaran los elementos uno al lado del otro.. como en este ejemplo.

https://jsfiddle.net/dmh0341L/5/