Propiedad de columnas CSS
Ejemplo
Especifique el ancho mínimo para cada columna y el número máximo de columnas:
div
{
columns: 100px 3;
}
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
La columns
propiedad es una propiedad abreviada para:
La parte de ancho de columna definirá el ancho mínimo para cada columna, mientras que la parte de conteo de columnas definirá el número máximo de columnas. Al usar esta propiedad, el diseño de varias columnas se dividirá automáticamente en una sola columna en anchos de navegador estrechos, sin necesidad de consultas de medios u otras reglas.
Valor por defecto: | coche coche |
---|---|
Heredado: | No |
Animable: | si, ver propiedades individuales . Leer sobre animable |
Versión: | CSS3 |
Sintaxis de JavaScript: | objeto .style.columns="100px 3" |
Compatibilidad con 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 de -webkit- o -moz- especifican la primera versión que funcionó con un prefijo.
Property | |||||
---|---|---|---|---|---|
columns | 50.0 4.0 -webkit- |
10.0 | 52.0 9.0 -moz- |
9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
Sintaxis CSS
columns: auto|column-width column-count|initial|inherit;
Valores de propiedad
Value | Description |
---|---|
auto | Default value. Sets both the column-width and column-count to "auto" |
column-width | Defines the minimum width for each column |
column-count | Defines the maximum number of columns |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Más ejemplos
Ejemplo
Divide el texto en un elemento <div> en tres columnas:
div
{
column-count: 3;
}
Ejemplo
Especifique un espacio de 40 píxeles entre las columnas:
div
{
column-gap: 40px;
}
Ejemplo
Especifique el ancho, el estilo y el color de la regla entre columnas:
div
{
column-rule: 4px double #ff00ff;
}
páginas relacionadas
Tutorial de CSS: columnas múltiples de CSS
Referencia HTML DOM: propiedad de columnas