CSS3 varias columnas
el contenido del texto CSS3 puede ser diseñado como un diseño de varias columnas de periódicos, los siguientes ejemplos:
Este tutorial - la ciencia no es sólo la tecnología, sino también un sueño! Este tutorial (www.w3big.com) proporciona el tutorial más completo basado en la tecnología de programación introduce los conceptos básicos de HTML, CSS, Javascript, Python, Java, Ruby, C, PHP, MySQL y otros lenguajes de programación. Sin embargo, el sitio también ofrece una serie de ejemplos en línea, a modo de ejemplo, se puede aprender mejor programación.
Soporte para el navegador
Las cifras de la tabla representan el primer navegador compatible con el número de versión del método.
Inmediatamente después del navegador el número -webkit- o prefijo -moz- especificado.
| propiedad | |||||
|---|---|---|---|---|---|
| la columna de recuento | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit- 11.1 |
| la columna de diferencia | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit- 11.1 |
| columna en reglas | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit- 11.1 |
| columna de regla de color | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit 11.1 |
| En reglas de estilo de columna | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit 11.1 |
| columna en reglas de ancho | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit 11.1 |
| columna de ancho | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit 11.1 |
propiedades de varias columnas CSS3
En este capítulo vamos a aprender un poco más propiedades de las columnas de CSS3:
-
column-count -
column-gap -
column-rule-style -
column-rule-width -
column-rule-color -
column-rule -
column-span -
column-width
CSS3 para crear varias columnas
column-count atributo especifica que sea necesario dividir el número de columnas.
El elemento siguiente ejemplo <div> en el texto se divide en tres:
Ejemplos
-webkit-columna-count: 3; / * Chrome, Safari, Opera * /
-moz-column-count: 3; / * Firefox * /
la columna de recuento: 3;
}
Trate »
CSS3 brecha de varias columnas entre las columnas y columnas
column-gap propiedad especifica la distancia entre las columnas y columnas.
En el siguiente ejemplo se especifica la distancia entre la columna y la columna es de 40 píxeles:
Ejemplos
-webkit-columna-gap: 40px; / * Chrome, Safari, Opera * /
-moz-column-gap: 40px; / * Firefox * /
la columna de diferencia: 40px;
}
Trate »
bordes de las columnas de CSS3
column-rule-style propiedad especifica las columnas de estilo frontera entre columnas:
Ejemplos
-webkit-columna en reglas de estilo: sólido; / * Chrome, Safari, Opera * /
-moz-column-rule-estilo: sólido; / * Firefox * /
columna en reglas de estilo: sólido;
}
Trate »
column-rule-width atributo especifica el grosor del borde de los dos:
Ejemplos
-webkit-columna-regla-width: 1px; / * Chrome, Safari, Opera * /
-moz-column-rule-width: 1px; / * Firefox * /
columna-regla-width: 1px;
}
Trate »
column-rule-color atributo especifica el color del borde de las dos:
Ejemplos
-webkit-columna-regla-color: azul claro; / * Chrome, Safari, Opera * /
-moz-column-rule-color: azul claro; / * Firefox * /
columna de regla de color: azul claro;
}
Trate »
column-rule propiedad es la abreviatura de todas las propiedades de las columnas *-en reglas.
En el siguiente ejemplo, se establece la columna directamente para el grosor del borde, color y estilo:
Ejemplos
-webkit-columna-regla: 1px sólido azul claro; / * Chrome, Safari, Opera * /
-moz-column-rule: 1px solid azul claro; / * Firefox * /
columna en reglas: 1px solid azul claro;
}
Trate »
¿Cuántas columnas a través del elemento especificado
En el siguiente ejemplo se especifica el elemento <h2> en todas las columnas:
Ejemplos
-webkit-columna útil: todos; / * Chrome, Safari, Opera * /
la columna de envergadura: todos;
}
Trate »
Especifica el ancho de las columnas
column-width atributo especifica el ancho de la columna.
Ejemplos
-webkit-column-width: 100px; / * Chrome, Safari, Opera * /
column-width: 100px;
}
Trate »
propiedades de varias columnas CSS3
La siguiente tabla muestra todos los atributos de CSS3 de varias columnas:
| propiedad | descripción |
|---|---|
| la columna de recuento | El número de columnas especificadas elemento debe ser dividido. |
| columna de relleno | Especifica cómo llenar columnas |
| la columna de diferencia | Especifica el espacio entre las columnas y columnas |
| columna en reglas | Todo * propiedad rápida en columna en reglas |
| columna de regla de color | Especifica el color de la frontera entre los dos |
| En reglas de estilo de columna | Especificar el estilo de la frontera entre los dos |
| columna en reglas de ancho | Especifica el grosor de la frontera entre los dos |
| la columna de envergadura | Especifica el número de columnas que se cruzan elemento |
| columna de ancho | Especifica el ancho de las columnas |
| columnas | Ajuste de la columna de ancho y taquigrafía columna de recuento |