Propiedad de relleno de columna CSS
Ejemplo
Especifique cómo llenar las columnas:
.newspaper1 {
column-fill: auto;
}
.newspaper2 {
column-fill: balance;
}
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
La column-fill
propiedad especifica cómo llenar columnas, equilibradas o no.
Sugerencia: si agrega una altura a un elemento de varias columnas, puede controlar cómo el contenido llena las columnas. El contenido se puede equilibrar o llenar secuencialmente.
Valor por defecto: | equilibrio |
---|---|
Heredado: | No |
Animable: | No. Leer sobre animable |
Versión: | CSS3 |
Sintaxis de JavaScript: | objeto .style.columnFill="auto" |
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 -moz- especifican la primera versión que funcionó con un prefijo.
Property | |||||
---|---|---|---|---|---|
column-fill | 50.0 | 10.0 | 52.0 13.0 -moz- |
10.0 7.0 -webkit- |
37.0 |
Sintaxis CSS
column-fill: balance|auto|initial|inherit;
Valores de propiedad
Value | Description |
---|---|
balance | Default value. Fills each column with about the same amount of content, but will not allow the columns to be taller than the height (so, columns might be shorter than the height as the browser distributes the content evenly horizontally) |
auto | Fills each column until it reaches the height, and do this until it runs out of content (so, this value will not necessarily fill all the columns nor fill them evenly) |
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 columnFill