Propiedad de ancho de columna CSS
Ejemplo
Especifique que el ancho de la columna debe ser de 100 px:
div
{
column-width: 100px;
}
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
La column-width
propiedad especifica el ancho de columna.
El número de columnas será el número mínimo de columnas necesario para mostrar todo el contenido del elemento.
column-width
es una propiedad flexible. Piense
column-width
en una sugerencia de ancho mínimo para el navegador. Una vez que el navegador no pueda ajustar al menos dos columnas con el ancho especificado, las columnas se detendrán y caerán en una sola columna.
Valor por defecto: | auto |
---|---|
Heredado: | No |
Animable: | si. Leer sobre animable |
Versión: | CSS3 |
Sintaxis de JavaScript: | objeto .style.columnWidth="100px" |
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 | |||||
---|---|---|---|---|---|
column-width | 50.0 4.0 -webkit- |
10.0 | 52.0 2.0 -moz- |
9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
Sintaxis CSS
column-width: auto|length|initial|inherit;
Valores de propiedad
Value | Description | Play it |
---|---|---|
auto | Default value. The column width will be determined by the browser | |
length | A length that specifies the width of the columns. The number of columns will be the minimum number of columns needed to show all the content across the element. Read about length units | |
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 columnWidth