-
Notifications
You must be signed in to change notification settings - Fork 0
/
columnas.html
46 lines (36 loc) · 2 KB
/
columnas.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Columnas</title>
<style>
.info{
columns: 4 20px;
}
.info div{
border: solid;
}
</style>
</head>
<body>
<div class="info">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
<!--column-count – Esta propiedad especifica el número de columnas que el navegador tiene que generar para distribuir el contenido del elemento.
column-width – Esta propiedad declara el ancho de las columnas. El valor se puede declarar como auto (por defecto) o en cualquiera de las unidades de CSS, como píxeles o porcentaje.
column-span – Esta propiedad se aplica a elementos dentro de la caja para determinar si el elemento se ubicará en una columna o repartido entre varias columnas. Los valores disponibles son all (todas las columnas) y none (por defecto).
column-fill – Esta propiedad determina cómo se repartirá el contenido entre las columnas. Los valores disponibles son auto (las columnas son completadas de forma secuencial) y balance (el contenido se divide en partes iguales entre todas las columnas).
column-gap – Esta propiedad define el tamaño del espacio entre las columnas. Acepta un valor en cualquiera de las unidades disponibles en CSS, como píxeles y porcentaje.
columns – Esta propiedad nos permite declarar los valores de las propiedades columncount y column-width al mismo tiempo.
column-rule-style – Esta propiedad define el estilo de la línea usada para representar la división. Los valores disponibles son hidden (por defecto), dotted, dashed, solid, double, groove, ridge, inset, y outset.
column-rule-color – Esta propiedad especifica el color de la línea usada para representar la división.
column-rule-width – Esta propiedad especifica el ancho de la línea usada para representar la división.
column-rule – Esta propiedad nos permite definir todos los valores de la línea al mismo tiempo.
-->