Coloque los elementos flotados directamente uno debajo del otro

Question

Me gustaría mostrar una fila de divisiones de arrastre una al lado de la otra, mientras que en la siguiente fila, la siguiente div se encuentra directamente debajo de la última. De esta manera:

Debido a que el diseño tiene que ser construida en un CMS, no puedo poner la caja de 1,3 y 2,4 en un div separat. ¿Hay alguna manera de lograr este tipo de comportamiento sin elementos adicionales? (El comportamiento de flotación normal no funciona, mostrar en línea/bloque en línea tampoco funciona). ¿O se necesita algo de JavaScript para construir un diseño como este?

Answer 1

Debido a las diferentes alturas, este parece el problema en el que todavía no he encontrado una técnica de CSS puro de uso general para manejarlo correctamente, a pesar de intentar realmente difícil.

He publicado esta respuesta antes: css alignment question

He renunciado y se utiliza un plugin de jQuery de hacer esto en el pasado por algo parecido :

jQuery Masonry

Una imagen vale más que mil palabras:

Answer 2

puede usar el nth-child(odd) en clear el float:left;.

css

.box {height:100px;width:100px;float:left;} 
.box:nth-child(odd) {clear:left;} 
.green {background:green;} 
.red{background:red;} 
.blue {background:blue;} 
.yellow {background:yellow;} 

html

<div class="box green">BOX 1</div> 
<div class="box red">BOX 2</div> 
<div class="box blue">BOX 3</div> 
<div class="box yellow">BOX 4</div> 

Demostración:http://jsfiddle.net/YSP2S/

Tenga en cuenta que esto no funcionará para Internet Explorer. Puede usar conditional comment y javascript para lograr lo mismo para Internet Explorer también.