Foros del Web » Creando para Internet » CSS »

CSS columns con DIV con HEIGHT automático no funciona

Estas en el tema de CSS columns con DIV con HEIGHT automático no funciona en el foro de CSS en Foros del Web. El primer DIV que pongo genera el HEIGHT en base a la relación aspecto dada partiendo de WIDTH Mientras que el Segundo se supone que ...
  #1 (permalink)  
Antiguo 11/09/2017, 18:19
 
Fecha de Ingreso: enero-2008
Mensajes: 511
Antigüedad: 9 años, 10 meses
Puntos: 6
Pregunta CSS columns con DIV con HEIGHT automático no funciona

El primer DIV que pongo genera el HEIGHT en base a la relación aspecto dada partiendo de WIDTH

Mientras que el Segundo se supone que que COLUMNS define el ancho de los hijos, pero parece que algo falla

Código HTML:
<div style="width:160px;" class="ratio r16-9">Contenedor de 160px x 90px</div>

<div style="columns:100px 3">
  <div class="ratio r16-9" style="width:inherit;">Contenedor de 0px x 0px</div>
</div> 
Código:
.ratio {
  position: relative;
}
.ratio:before {
  content: '';
  display: block;
}
.ratio.r16-9:before {
  padding-top: 56.25%;
}
.ratio.r4-3:before {
  padding-top: 75%;
}
.ratio.r1-1:before {
  padding-top: 100%;
}
  #2 (permalink)  
Antiguo 12/09/2017, 10:34
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.946
Antigüedad: 14 años, 8 meses
Puntos: 1801
Respuesta: CSS columns con DIV con HEIGHT automático no funciona

No se entiende nada que necesitas o qué cosa tienes.

Acá puse tu código en un fiddle, modifícalo para que se pueda ver el problema.

https://jsfiddle.net/7210bhyp/
  #3 (permalink)  
Antiguo 12/09/2017, 17:48
 
Fecha de Ingreso: enero-2008
Mensajes: 511
Antigüedad: 9 años, 10 meses
Puntos: 6
Respuesta: CSS columns con DIV con HEIGHT automático no funciona

Hola Rafael, , no me fué fácil describirlo, ahí tienes el código, los 2 primeros ejemplos son los parciales, en los siguientes ejemplos se combinan los 2 primeros, parece que "funciona en jsfiddle" aunque las cajas se cortan entre una y otra columna

https://jsfiddle.net/7210bhyp/4/

Aunque tengo mis dudas -> columns: 100px 3; <- Se supone que esto indica un máximo de 3 columnas con un ancho por columna de 100px, pero si pongo un ancho mayor de 300px al contenedor provoca que las columnas se vuelvan más anchas, ¿Es correcto o es un fallo?

Nota: En Opera medio funciona, en Firefox no funcionan los ratio

----------

En la siguiente imagen de ejemplo muestro como podría mostar unas Tarjetas partiendo del CSS: "Columns y Ratio" para controlar ancho y número de los elementos hijos por fila


Última edición por quico5; 12/09/2017 a las 18:28
  #4 (permalink)  
Antiguo 12/09/2017, 21:41
 
Fecha de Ingreso: enero-2008
Mensajes: 511
Antigüedad: 9 años, 10 meses
Puntos: 6
Respuesta: CSS columns con DIV con HEIGHT automático no funciona

Creo que me voy acercando, pero las columnas no estan centradas o justificadas ¿Se puede hacer algo?
https://jsfiddle.net/vxqbztse/4/

Actualización:
https://jsfiddle.net/vxqbztse/8/

Faltaria corregir este desbordamiento en webkit:


Última edición por quico5; 13/09/2017 a las 06:22



La zona horaria es GMT -6. Ahora son las 00:13.