Columnas CSS: column-count, column-width, columns, colum-gap y colum-rule. Ejemplos prácticos (CU01057D)
Bueno, aquí les dejo el código de la actividad:
.cols3 {
-webkit-column-count: 3; -webkit-column-gap: 20px; -webkit-column-rule: 1px solid #000;
-moz-column-count: 3; -moz-column-gap: 20px; -moz-column-rule: 1px solid #000;
column-count: 3; column-gap: 20px; column-rule: 1px solid #000;
}
.cols3 h1 { -webkit-column-span:all; -moz-column-span:all; column-span:all;
}
ACTIVIDAD
Explica paso a paso a qué da lugar cada instrucción o fragmento de código (ejemplo: .cols3 indica que se aplicarán los estilos definidos a todos los elementos html cuyo atributo class sea igual a cols3, -webkit-column-count: 3; se escribe para lograr que …).
¿Qué utilidad tiene la propiedad column-span?
R=
Antes que nada responderé para que se usa column-span. La verdad que esta propiedad no termine de entenderlo bien, pero creo que se trata de una propiedad que especifica el número de columnas de un elemento debe extenderse a lo largo.
Ahora el código:
Clase "cols3". Todo contenedor que use esta clase contara con tres columnas, separados entre 20px, y aparte los separan border de 1px, solidos y de color negro. (Las propiedades anteriormente mencionadas tienen compatibilidad con versiones anteriores de mozilla[-moz-], Chrome, Safari, Android y Ios[-webkit-] y con las versiones actuales)
Tag "cols3 h1". Todo encabezado que este dentro de un contenedor con clase "cols3" estará en todo el ancho del contenedor sin importar las columnas en medio.