Infobox con Bbcode

Sviluppatore
6

Ok, sono riuscito a testare il supporto per 2 colonne. Il codice è ancora piuttosto basilare/primitivo.

Il codice al momento ha solo opzioni float per Redbox.

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

Devo ancora aggiungere altre opzioni di colore.

Come usare nel Post

[wrap="redboxfl"]
# Infobox float

Testing float
[/Wrap]

[wrap="redboxfr"]
# Infobox float

Testing float
[/Wrap]
>
Text after
  • Nota: Il “>” è richiesto tra le righe, almeno con il testo sottostante. In alternativa, potresti mettere il testo sottostante accanto a “> Test” in modo simile a come l’ho usato per il titolo dell’Infobox.
Screenshot Mobile

Lo screenshot mostra un'applicazione mobile, con un menu a tendina contenente quattro opzioni relative agli elementi flottanti in un contesto digitale. (Didascalia dell'IA)
Lo screenshot mostra un'applicazione mobile, con un menu a tendina contenente quattro opzioni relative agli elementi flottanti in un contesto digitale. (Didascalia dell'IA)864×1544 170 KB

@merefield potrei aggiungere qualcosa a ciascun codice attuale in Op, qualcosa come


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

Per avere l’opzione di usarlo nel post come? Confermo che funziona!

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

Testing float
[/Wrap]
Screenshot Mobile

Questa immagine mostra uno screenshot di un dispositivo mobile con un elenco di elementi flottanti denominati diversamente. (Didascalia dell'IA)
Questa immagine mostra uno screenshot di un dispositivo mobile con un elenco di elementi flottanti denominati diversamente. (Didascalia dell'IA)862×1222 120 KB

Il primo set usa semplicemente float left, 3 di essi vanno a capo automaticamente!

Penso di aggiungere il codice mobile con una larghezza del 44,5%. Quindi creare il supporto desktop per 3 colonne, magari con una larghezza impostata al 25%?

Oppure, se hai una soluzione migliore per consentire 2 colonne su mobile con 3 o 4 su desktop. Anche se sarebbe necessario che la larghezza si adattasse in base al numero di colonne e spostasse le colonne aggiuntive alla riga successiva se su mobile.

Forse usare qualcosa come la griglia dall’immagine o il codice da masonry image?