mover - Columnas CSS con flujo izquierda-derecha

mover a la derecha css

Question

Digamos que tengo un div que contendrá un conjunto de elementos (divs), que pueden tener diferentes alturas, pero todos tendrán el mismo ancho.

Lo he logrado actualmente con isotope + masonry, pero como algunos navegadores ya soportan multi columnas CSS3, esperaba tener una única solución CSS para estos navegadores, volviendo a Javascript para el resto.

Este es el CSS que he estado intentando:

.div-of-boxes {
  -webkit-column-count: 3;
  -webkit-column-gap:   10px;
  -moz-column-count:    3;
  -moz-column-gap:      10px;
  column-count:         3;
  column-gap:           10px;
}

Sin embargo, esto hace que el flujo de los elementos sea de arriba hacia abajo, de izquierda a derecha. Me gustaría, en cambio, un flujo de arriba abajo de izquierda a derecha. Este es un ejemplo de lo que me gustaría:

1 2 3
4 5 6
7 8 9

Pero esto es lo que obtengo:

1 4 7
2 5 8
3 6 9

En Elementos de varias columnas de Flow izquierda-derecha antes de arriba-abajo, se hace algo similar, pero no estoy satisfecho con la respuesta, y no funcionará con elementos de altura diferente. ¿Es esto posible con columnas de CSS o es una limitación?

Answer 1

La especificación de varias columnas no ofrece ninguna propiedad para cambiar la distribución de los elementos entre las columnas: http://www.w3.org/TR/css3-multicol/ . Dicha propiedad parece ir en contra de lo que el módulo fue diseñado (recreando cómo se presentan los artículos de periódicos o revistas).

Ninguna de las otras soluciones de CSS puro le permitirá lograr el efecto que está buscando.

Answer 2

Puede usar jQuery para reorganizar elementos en columnas. En caso de 2 cols sería:

$(''.your-columns-container .your-item:nth-child(even)'').appendTo(''.your-columns-container'');

https://jsfiddle.net/hzvp7sgf/

Y algo más complicado para 3 columnas:

$(''.your-columns-container .your-item:nth-child(3n - 1)'').addClass(''container-col2'');
$(''.your-columns-container .your-item:nth-child(3n)'').addClass(''container-col3'');

$(''.container-col2'').appendTo(''.your-columns-container'').removeClass(''container-col2'');
$(''.container-col3'').appendTo(''.your-columns-container'').removeClass(''container-col3'');

https://jsfiddle.net/d4LeLyu5/

Answer 3

Si su diseño siempre será de 3 columnas de ancho, podría intentar usar el selector ''enésimo'' en sus divisiones internas. Puedes hacer esto limpiando tu 4º artículo.

CSS

#container {
    overflow: hidden;
    width: 440px;
}
#container div {
    background-color: gray;
    width: 110px;
    margin: 5px;
    float: left;
}
#container div:nth-child(4) {
    clear: both;
}

HTML

<div id="container">
    <div id="widget1">1</div>
    <div id="widget2">2</div>
    <div id="widget3">3</div>
    <div id="widget4">4</div>
    <div id="widget5">5</div>
    <div id="widget6">6</div>
    <div id="widget7">7</div>
    <div id="widget7">8</div>
</div>

Algo como: http://jsfiddle.net/R8GRp/