html - tricks - Cambiar el flujo de dirección de las columnas CSS
tablas html (4)
Bueno, a primera vista, pensé que debería mirar la biblioteca de Masonry . Cuando busque mampostería, posiblemente también encuentre una caja flexible de mampostería y columnas de mampostería .
El problema con las columnas y las soluciones de caja flexible es que los primeros elementos están en la primera columna.
Encontré una solución posible, que solo funciona cuando se fija el número de elementos.
Para nueve artículos en tres columnas:
#blogPosts {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.blog {
color: white;
width: 33%;
}
.blog:nth-child(3n+1) {
-webkit-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
}
.blog:nth-child(3n+2) {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
}
.blog:nth-child(3n+3) {
-webkit-box-ordinal-group: 3;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
}
.blog:nth-child(n+7):nth-child(-n+9) {
page-break-after: always;
-webkit-break-after: always;
-moz-break-after: always;
break-after: always;
}
<div id="blogPosts">
<div class="blog" style="background-color:blue; height:50px;">1</div>
<div class="blog" style="background-color:red; height:75px;">2</div>
<div class="blog" style="background-color:green; height:100px;">3</div>
<div class="blog" style="background-color:black; height:30px;">4</div>
<div class="blog" style="background-color:yellow; height:50px;">5</div>
<div class="blog" style="background-color:purple; height:80px;">6</div>
<div class="blog" style="background-color:pink; height:150px;">7</div>
<div class="blog" style="background-color:orange; height:15px;">8</div>
<div class="blog" style="background-color:gold; height:50px;">9</div>
</div>
Lo anterior usa la caja flexible, con la propiedad order y nth selector de niños. Y finalmente también vea: ¿Cómo especificar un elemento después del cual envolver en css flexbox?
Entonces tengo CSS así:
#blogPosts{
-moz-column-count: 3;
-moz-column-gap: 10px;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
column-count: 3;
column-gap: 10px;
width: 100%;
}
y esto crea 3 columnas perfectamente, pero cuando gano otra fila, el orden parece salir verticalmente como:
1,3,5
2,4,6
En lugar de lo que quiero como:
1,2,3
4,5,6
¡Importante!
Otro atributo importante que necesito, es que debe haber un margen establecido entre cada publicación verticalmente. Entonces, por ejemplo, si observa la tabla de arriba si 2 es más largo que 1 , la parte superior de 4 comenzará y debajo de 1 en lugar de: la height of 2 + y .
El HTML es así:
<div id="blogPosts">
<div class="blog">Content</div>
<div class="blog">Content</div>
...
</div>
¿Qué puedo hacer para arreglar esto?
Me complace cualquier solución, incluso una que incluya javascript / jquery
This es el tipo de cosa que estoy buscando
Creo que es un malentendido cómo funciona la separación de columnas con colsms css. Su clase blogPosts está separando el contenido lo más uniformemente posible en 3 colunms, por lo que aparece como:
1 3 5
2 4 6
pero si lo haces
<div class="blogPosts">
Content 1
</div>
<br>
<div class="blogPosts">
Content 2
</div>
<br>
<div class="blogPosts">
Content 3
</div>
Entonces los conentes aparecerían como:
1
2
3
pero el contenido dentro de estas secciones se ajustaría a los 3 colunms.
Esto se puede implementar con CSS simple. HTML:
<div id="blogPosts">
<div class="blog">1Content</div>
<div class="blog">1Content</div>
<div class="blog">2Content</div>
</div>
CSS: crea la clase "blog" como bloque en línea y flotar a la izquierda como se muestra a continuación.
.blog {
display: inline-block;
width: 33.3%;
float: left;
margin-bottom: -999em;
padding-bottom: 999em;
}
#blogPosts{
overflow: hidden;
}
Esto solucionará el problema de altura que también tuviste. :)
Un enfoque es usar flexbox
#blogPosts {
display: flex;
align-items: left;
justify-content: left;
flex-direction: row;
flex-wrap: wrap;
flex-flow: row wrap;
align-content: flex-end;
}