CSS3 varias columnas Disposición
El diseño de varias columnas CSS3 permite una fácil definición de varias columnas de texto - al igual que en los periódicos:
Daily Ping
Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta
nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos por -webkit- o -moz- especifican la primera versión que funcionaba con un prefijo.
| Propiedad | |||||
|---|---|---|---|---|---|
| column-count | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| column-gap | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| column-rule | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| column-rule-color | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| column-rule-style | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| column-rule-width | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| column-width | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
Propiedades de varias columnas CSS3
En este capítulo aprenderá de las propiedades de varias columnas:
-
column-count -
column-gap -
column-rule-style -
column-rule-width -
column-rule-color -
column-rule -
column-span -
column-width
CSS3 Cree varias columnas
La column-count propiedad especifica el número de columnas de un elemento debe estar dividido en.
El siguiente ejemplo se va a dividir el texto en el <div> elemento en 3 columnas:
Ejemplo
div
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
Inténtalo tú mismo " CSS3 Especificar la brecha entre las columnas
La column-gap propiedad especifica la distancia entre las columnas.
En el siguiente ejemplo se especifica un espacio de 40 píxeles entre las columnas:
Ejemplo
div
{
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
Inténtalo tú mismo " Reglas de columnas CSS3
El column-rule-style propiedad especifica el estilo de la regla entre columnas:
Ejemplo
div
{
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
}
Inténtalo tú mismo " La column-rule-width propiedad especifica el ancho de la regla entre columnas:
Ejemplo
div
{
-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 1px; /* Firefox */
column-rule-width: 1px;
}
Inténtalo tú mismo " La column-rule-color propiedad especifica el color de la regla entre columnas:
Ejemplo
div
{
-webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
-moz-column-rule-color: lightblue; /* Firefox */
column-rule-color: lightblue;
}
Inténtalo tú mismo " La column-rule propiedad es una propiedad abreviada para establecer todas las propiedades * de columna en reglas anteriormente.
El ejemplo siguiente define el ancho, estilo y color de la regla entre columnas:
Ejemplo
div
{
-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid lightblue; /* Firefox */
column-rule: 1px solid lightblue;
}
Inténtalo tú mismo " Especifique el número de columnas de un elemento debe Span
La column-span propiedad especifica el número de columnas de un elemento debe extenderse a lo largo.
El siguiente ejemplo especifica que el <h2> elemento debe extenderse a lo largo de todas las columnas:
Ejemplo
h2 {
-webkit-column-span: all; /* Chrome, Safari, Opera */
column-span: all;
}
Inténtalo tú mismo " Especificar el ancho de columna
La column-width propiedad especifica una sugerido, la anchura óptima para las columnas.
El siguiente ejemplo especifica que el sugerido, el ancho óptimo para las columnas debe ser 100px:
Ejemplo
div {
-webkit-column-width: 100px; /* Chrome, Safari, Opera */
column-width: 100px;
}
Inténtalo tú mismo " CSS3 columnas múltiples propiedades
La siguiente tabla muestra todas las propiedades multi-columnas:
| Propiedad | Descripción |
|---|---|
| column-count | Especifica el número de columnas de un elemento se debe dividir en |
| column-fill | Especifica cómo llenar columnas |
| column-gap | Especifica la distancia entre las columnas |
| column-rule | Una propiedad abreviada para establecer todas las propiedades de las columnas *-regla- |
| column-rule-color | Especifica el color de la regla entre columnas |
| column-rule-style | Especifica el estilo de la regla entre columnas |
| column-rule-width | Especifica el ancho de la regla entre columnas |
| column-span | Especifica el número de columnas de un elemento debe extenderse a lo largo |
| column-width | Especifica una sugerido, el ancho óptimo para las columnas |
| columns | Una propiedad abreviada para establecer la columna de ancho y de la columna de recuento |