Infoboxes de Bbcode

Desarrollador
6

Okay, he logrado probar la compatibilidad con 2 columnas. El código sigue siendo bastante básico/primitivo.

El código actual solo tiene opciones flotantes para Redbox.

// Probando flotante

div[data-wrap="redboxfl"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
//*
      float: left;
      margin-right: 0.10em;
      width: 45.5% !important;
//*
      padding-left: 0.30em;
      padding-right: 0.30em;
      float: left;
      border: 2.5px solid #ff0000;
      border-radius: 0.40em;
}
div[data-wrap="redboxfr"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
//*
      float: right;
      margin-left: 0.10em;
      width: 45.5% !important;
//*
      padding-left: 0.30em;
      padding-right: 0.30em;
      float: right;
      border: 2.5px solid #ff0000;
      border-radius: 0.40em;
}

Todavía necesito agregar otras opciones de color.

Cómo usar en la publicación

[wrap="redboxfl"]
# Infobox flotante

Probando flotante
[/Wrap]

[wrap="redboxfr"]
# Infobox flotante

Probando flotante
[/Wrap]
>
Texto después
  • Nota: El “>” es necesario entre filas, al menos con el texto a continuación. Alternativamente, podrías poner el texto a continuación al lado de “> Texto” de manera similar a como lo usé para el título de Infobox.
Captura de pantalla móvil

La imagen es una captura de pantalla de una aplicación móvil, que muestra un menú desplegable con cuatro opciones relacionadas con elementos flotantes en un contexto digital. (Subtitulado por IA)
La imagen es una captura de pantalla de una aplicación móvil, que muestra un menú desplegable con cuatro opciones relacionadas con elementos flotantes en un contexto digital. (Subtitulado por IA)864×1544 170 KB

@merefield, ¿podría agregar algo a cada código actual en Op, algo como?


&[data-float="left"]{
      float: left;
      margin-left: 0.25em !important;
      width: 44.5% !important;
}
&[data-float="right"]{
      float: right;
      margin-right: 0.25em !important;
      width: 44.5% !important;
}

¿Para tener la opción de usar en la publicación como? ¡Confirmado funciona!

[wrap="redbox" float="left"]
# Infobox flotante

Probando flotante
[/Wrap]
Captura de pantalla móvil

Esta imagen muestra una captura de pantalla de un dispositivo móvil con una lista de elementos flotantes con nombres diferentes. (Subtitulado por IA)
Esta imagen muestra una captura de pantalla de un dispositivo móvil con una lista de elementos flotantes con nombres diferentes. (Subtitulado por IA)862×1222 120 KB

¡El primer conjunto es solo usar flotante a la izquierda, 3 de ellos se ajustan automáticamente!

Creo que agregué el código móvil con un ancho del 44.5%. ¿Luego hago que el escritorio admita 3 columnas, tal vez con un ancho establecido en 25%?

O si tienes una mejor solución para permitir 2 columnas en móvil con 3 o 4 en escritorio. Aunque necesitaría que el ancho se ajuste según el número de columnas y mueva columnas adicionales a la siguiente línea si es móvil.

Tal vez usar algo como una cuadrícula de la imagen o código de imágenes de mampostería.