Bbcode-Infoboxen

Entwickler
6

Okay, ich habe es geschafft, die Unterstützung für 2 Spalten zu testen. Der Code ist noch ziemlich einfach/primitiv.

Derzeit hat der Code nur Float-Optionen für Redbox.

// Testen von Float

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;
}

Ich muss noch andere Farboptionen hinzufügen.

Verwendung im Beitrag

[wrap="redboxfl"]
# Infobox Float

Testen von Float
[/Wrap]

[wrap="redboxfr"]
# Infobox Float

Testen von Float
[/Wrap]
>
Text danach
  • Hinweis: Das “>” ist zwischen den Zeilen erforderlich, zumindest mit dem Text darunter. Alternativ könnten Sie den Text darunter neben dem “> Text” platzieren, ähnlich wie ich es für den Infobox-Titel verwendet habe.
Screenshot Mobile

Der Screenshot zeigt eine mobile Anwendung mit einem Dropdown-Menü mit vier Optionen für schwebende Elemente in einem digitalen Kontext. (Beschriftet von KI)
Der Screenshot zeigt eine mobile Anwendung mit einem Dropdown-Menü mit vier Optionen für schwebende Elemente in einem digitalen Kontext. (Beschriftet von KI)864×1544 170 KB

@merefield Könnte ich dem aktuellen Code in Op etwas hinzufügen, wie zum Beispiel


&[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;
}

Um die Option zu haben, es im Beitrag wie folgt zu verwenden? Bestätigt, funktioniert!

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

Testen von Float
[/Wrap]
Screenshot Mobile

Dieses Bild zeigt einen Screenshot eines Mobilgeräts mit einer Liste von unterschiedlich benannten schwebenden Elementen. (Beschriftet von KI)
Dieses Bild zeigt einen Screenshot eines Mobilgeräts mit einer Liste von unterschiedlich benannten schwebenden Elementen. (Beschriftet von KI)862×1222 120 KB

Die erste Reihe verwendet einfach Float links, 3 davon werden automatisch umgebrochen!

Ich denke, ich füge den mobilen Code mit 44,5% Breite hinzu. Dann Desktop-Unterstützung für 3 Spalten, vielleicht mit einer Breite von 25%?

Oder wenn Sie eine bessere Lösung haben, um 2 Spalten auf Mobilgeräten und 3 oder 4 auf Desktops zu ermöglichen. Allerdings müsste die Breite je nach Anzahl der Spalten angepasst werden und zusätzliche Spalten in die nächste Zeile verschoben werden, wenn es sich um ein Mobilgerät handelt.

Vielleicht etwas wie Grid aus dem Bild oder Code von Masonry Image verwenden?