La plantilla {{div col}} (abreviatura de division column) formatea una lista en columnas que se ajustan en múltiples resoluciones de pantalla de manera responsiva. Divide automáticamente el espacio de pantalla disponible en partes iguales, lo que significa, por ejemplo, que no es necesario adivinar cuántas columnas usar y luego averiguar el punto o los puntos divisorios, por ejemplo, el punto medio para dividir la lista en dos columnas, o los puntos de un tercio y dos tercios para dividir la lista en tres columnas. Para evitar que se divida una sección de una lista, se puede usar la plantilla {{ No col break }} .
{{ div col }} <!-- el ancho predeterminado es 30em --> * a * b * c * d * e * f * g * h {{ div col end }}
Produce:
Hay seis parámetros para esta plantilla:
|colwidth=
colwidth=20em
.|rules=yes
yes
.|gap=
gap=2em
. El espaciado predeterminado (establecido por el navegador) es 1 em.|class=
|style=
|small=yes
|content=
{{ div col | colwidth = 10em }} <!-- ancho de columna de 10em --> * a * b * c * d * e * f * g * h {{ div col end }}
Produce:
{{ div col | colwidth = 10vw }} <!-- ancho de columna del 10% del área visible o contenedor--> * a * b * c * d * e * f * g * h {{ div col end }}
Produce:
{{ div col | colwidth = 10em | rules = yes }} <!-- ancho de columna de 10em con reglas --> * a * b * c * d * e * f * g * h {{ div col end }}
Produce:
{{ div col | colwidth = 10em | rules = yes | gap = 2em }} <!-- ancho de columna de 10em con reglas y un espacio de 2em --> * a * b * c * d * e * f * g * h {{ div col end }}
Produce:
{{ div col | pequeño = sí }} <!-- Pequeño = sí --> * a * b * c * d * e * f * g * h {{ div col end }}
Produce:
{{ div col | colwidth = 10em | content = <!-- el parámetro de contenido no necesita {{div col end}} -->* a* b* c* d* y* o*g* yo}}
Produce:
{{ div col | colwidth = 10em | rules = yes | gap = 2em | small = yes }} * a * b * c * d * e * f * g * h {{ div col end }}
Produce:
{{ div col | colwidth = 10em }} <!--Caracteres de texto sin marcado de lista -->abdodmiFgramoyo{{ div col fin }}
Produce
a b c d e f g h
{{ div col }} <!--Lorem ipsum --> {{ lorem ipsum }} {{ div col end }}
Produce
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
El sistema CSS subyacente no puede dividir las sublistas en columnas. Observe el formato desigual que aparece a continuación:
{{ div col | colwidth = 10em | reglas = sí | espacio = 2em | estilo = recuento-de-columnas:3 | contenido =* a* b* c** cd** esto** ver*g* yo}}
Produce:
Desactivar la break-inside: avoid-column;
regla parece ayudar.
En determinadas circunstancias, los navegadores basados en Chrome pueden separar las imágenes de sus subtítulos, colocando el subtítulo en la siguiente columna. Este error se informó en 2018 como T193163 y parece ser un error en Chromium, identificado como problema 40578413.
Datos de plantilla para la columna Div
Divide una lista en columnas. Divide automáticamente cada columna en un espacio igual, por lo que no es necesario buscar manualmente el punto medio en dos columnas. La lista se proporciona mediante |content= o se cierra con {{div col end}}.
{{col div}}
{{colbegin}}
(pero no o ){{col begin}}
{{col-begin}}
{{cols}}
{{div col start}}
{{div col begin}}
{{div-col}}
{{palmares start}}
Las plantillas que se enumeran aquí no son intercambiables . Por ejemplo, si se utiliza {{ col-float }} con {{ col-end }} en lugar de {{ col-float-end }}, se dejaría un espacio abierto, lo que podría dañar cualquier formato posterior.<div>...</div>
† ¿Puede la plantilla manejar el marcado wiki básico {| | || |- |}
utilizado para crear tablas ? Si no, se deben utilizar plantillas especiales que produzcan estos elementos (como {{ (! }} , {{ ! }} , {{ !! }} , {{ !- }} , {{ !) }} ) o etiquetas HTML ( <table>...</table>
, <tr>...</tr>
, etc.).