[SOLUCIONADO] Posicionar divs de diferente altura abajo

[perezmjosem]

Hola,

Tengo el siguiente problema. Estoy generando elementos que vienen desde una base de datos. Estos poseen una imagen que tiene alturas diferentes, la idea es que cada elemento este alineado verticalmente, pero no horizontal.
La idea es que luzca de la siguiente manera.



El problema que me surge, es que el siguiente elemento de el ultimo de la fila, se pone debajo del elemento con mas altura del anterior, es dificil de explicar por lo que adjunto dos imagenes de mi problema.






Realmente no entiendo el comportamiento y como solucionarlo. Por eso estoy solicitandoles la ayuda. Adjunto mi codigo, estoy usando bootstrap 3.

Código HTML:

<div class="row">
    <div class="flayer-wrapper">
           <div class="flayer-list clearfix">
                 <div class="flayer-item box">
                       <!-- Contenido de la caja -->
                 </div>
 
                 <div class="flayer-item box">
                       <!-- Contenido de la caja -->
                 </div>
           </div>
    </div>
</div>
 

Código CSS:

.flayer-wrapper{
    width: 960px;
    margin: 0 auto;
}
 
.flayer-wrapper .flayer-list {
    margin: -10px auto 0 auto;
    display: inline-table;
}
 
.flayer-item {    
    left: 0;
    top: 0;
    padding: 0px;
    width: 220px;
    float: left;
}
 

Desde ya agradecido.

[metacortex]

Lo que deseas es un efecto como Pinterest, cierto? Si el flujo de elementos no es vertical, es necesario echar mano del posicionamiento absoluto dado que los recuadros no tienen la misma altura.

Si además esos recuadros necesitan ser actualizados deberás permitir que el posicionamiento sea manejado por un lenguaje dinámico. Échale un ojo a recursos como Masonry (aquí un ejemplo descargable de integración con Bootstrap).

[perezmjosem]

Es justamente el comportamiento deseado que estaba buscando. Muchas gracias!!
Saludos