Plantilla:Div col end
.svg/1280px-Test_Template_Info-Icon_-_Version_(2).svg.png){kind=icon}
 | Esta plantilla se utiliza en aproximadamente 323.000 páginas, o aproximadamente el 1 % de todas las páginas . Para evitar interrupciones importantes y una carga del servidor, cualquier cambio debe probarse en las subpáginas /sandbox o /testcases de la plantilla, o en su propia subpágina de usuario . Los cambios probados se pueden agregar a esta página en una sola edición. Considere discutir los cambios en la página de discusión antes de implementarlos. |
| Propiedad | Explorador de Internet | Firefox | Safari | Cromo | Ópera |
|---|---|---|---|---|---|
| ancho de columna conteo de columnas | ≥ 10 (2012) | ≥ 1,5 (2005) | ≥ 3 (2007) | ≥ 1 (2008) | ≥ 11,1 (2011) |
| columnas | ≥ 10 (2012) | ≥ 9 (2011) | ≥ 3 (2007) | ≥ 1 (2008) | ≥ 11,1 (2011) |
| romper antes romper después romper dentro | ≥ 10 (2012) | ≥ 65 (2019) | ≥ 10 (2016) | ≥ 65 (2016) | ≥ 15 (2013) |
 | Esta plantilla utiliza Lua : |
 | Esta plantilla utiliza TemplateStyles: |
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 }} .
Uso
Uso básico
{{ div col }} <!-- el ancho predeterminado es 30em --> * a * b * c * d * e * f * g * h {{ div col end }}Produce:
- a
- b
- do
- d
- mi
- F
- gramo
- yo
Parámetros
Hay seis parámetros para esta plantilla:
|colwidth=- Especifica el ancho mínimo de las columnas para que la cantidad de columnas se base automáticamente en el ancho de la pantalla (es decir, se mostrarán más columnas en pantallas más anchas). Si no se proporciona ningún valor, la plantilla utiliza un valor predeterminado de 30 em. El ancho se puede especificar en cualquier unidad de longitud relativa o absoluta de CSS , por ejemplo, em (aproximadamente el ancho de la "M" mayúscula del tipo de letra mostrado), por ejemplo,
colwidth=20em. |rules=yes- Agrega líneas verticales ("reglas") entre las columnas si se establece en
yes. |gap=- Especifica el espacio entre el contenido de columnas adyacentes, en cualquier unidad de ancho CSS válida, p. ej.,
gap=2em. El espaciado predeterminado (establecido por el navegador) es 1 em. |class=- Una clase HTML, o varias clases delimitadas por espacios, para aplicar a las columnas.
|style=- Estilo CSS para aplicar a las columnas.
|small=yes- Establece el tamaño de fuente al 90%.
|content=- Contenido que se aplicará a las columnas. Este parámetro es equivalente a {{ columnas-lista }} , que es un paso a través de esta plantilla.
Ejemplos
Ancho de columna
- Ancho fijo
{{ div col | colwidth = 10em }} <!-- ancho de columna de 10em --> * a * b * c * d * e * f * g * h {{ div col end }}Produce:
- a
- b
- do
- d
- mi
- F
- gramo
- yo
- Ancho variable
{{ 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:
- a
- b
- do
- d
- mi
- F
- gramo
- yo
Normas
{{ 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:
- a
- b
- do
- d
- mi
- F
- gramo
- yo
Brecha
{{ 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:
- a
- b
- do
- d
- mi
- F
- gramo
- yo
Pequeño
{{ div col | pequeño = sí }} <!-- Pequeño = sí --> * a * b * c * d * e * f * g * h {{ div col end }}Produce:
- a
- b
- do
- d
- mi
- F
- gramo
- yo
Contenido
{{ div col | colwidth = 10em | content = <!-- el parámetro de contenido no necesita {{div col end}} -->* a* b* c* d* y* F*g* yo}}Produce:
- a
- b
- do
- d
- mi
- F
- gramo
- yo
Múltiples parámetros
{{ div col | colwidth = 10em | rules = yes | gap = 2em | small = yes }} * a * b * c * d * e * f * g * h {{ div col end }}Produce:
- a
- b
- do
- d
- mi
- F
- gramo
- yo
Caracteres de texto sin marcado de lista
{{ div col | colwidth = 10em }} <!--Caracteres de texto sin marcado de lista -->abdodmiFgramoyo{{ div col fin }}Produce
a b c d e f g h
Lorem ipsum
{{ 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.
Limitación
Sublistas
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:
- a
- b
- do
- cd
- esto
- ver
- gramo
- yo
Desactivar la break-inside: avoid-column;regla parece ayudar.
Los navegadores basados en Chrome pueden separar las imágenes de los subtítulos
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.
Categorías de seguimiento
- Categoría:Páginas que utilizan div col con parámetros desconocidos (0) (por uso erróneo de nombres de parámetros no documentados aquí)
- Categoría:Páginas que utilizan div col con parámetro pequeño (3,481)
Datos de plantilla
Datos de plantilla para el final de la columna Div
Finaliza una lista de varias columnas iniciada por {{div col}}. No acepta parámetros.
| Parámetro | Descripción | Tipo | Estado | |||
|---|---|---|---|---|---|---|
| No hay parámetros especificados | ||||||
Redirecciones
{{col div end}}{{colend}}(pero no ){{Col end}}{{div end}}{{Divcol-end}}{{Divcolend}}{{Divend}}{{End div col}}{{EndDivCol}}{{End of solid block}}
Véase también
Familias de plantillas generadoras de columnas
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>
| Tipo | Familia | ¿ Maneja el código de la tabla wiki? † | Adaptable a dispositivos móviles | Plantilla de inicio | Divisor de columna | Plantilla final |
|---|---|---|---|---|---|---|
| Flotar | "col-flotante" | Sí | Sí | {{ col-float }} | {{ col-float-break }} | {{ col-float-end }} |
| "columnas-inicio" | Sí | Sí | {{ columnas-inicio }} | {{ columna }} | {{ columnas-fin }} | |
| Columnas | "columna div" | Sí | Sí | {{ col. div }} | – | {{ div col fin }} |
| "lista de columnas" | No | Sí | {{ columnas-lista }} (envuelve el div col) | – | – | |
| Caja flexible | "columnas flexibles" | No | Sí | {{ columnas flexibles }} | – | – |
| Mesa | "columna" | Sí | No | {{ col-begin }} , {{ col-begin-fixed }} o {{ col-begin-small }} | {{ col-break }} o {{ col-2 }} .. {{ col-5 }} | {{ col-fin }} |
† ¿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.).
