BBCodeのインフォボックス

[Heliosurge (Dan DeMontmorency)]

2列のサポートをテストできました。コードはまだ非常に基本的/原始的です。

現在のコードには、Redbox の float オプションのみがあります。

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

まだ他の色のオプションを追加する必要があります。

投稿での使用方法

[wrap="redboxfl"]
# Infobox float

Testing float
[/Wrap]

[wrap="redboxfr"]
# Infobox float

Testing float
[/Wrap]
>
Text after

• 注: 「>」は、少なくとも下のテキストがある行の間で必要です。または、Infobox のタイトルに使用した方法と同様に、テキストを「> Text」の横に配置することもできます。

Screenshot Mobile

---

@merefield Op の現在のコードに何か追加できますか？

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

投稿でこのように使用するオプションを追加できますか？ 確認済み、動作します！

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

Testing float
[/Wrap]

Screenshot Mobile

最初のセットは、3つの float left を使用するだけで自動的に折り返されます！

モバイルで幅を44.5%に設定したと思います。次に、デスクトップで3列をサポートするようにします。幅を25%に設定しますか？

または、モバイルで2列、デスクトップで3列または4列を許可するより良い解決策があれば。ただし、幅は列数に応じて調整し、モバイルの場合は追加の列を次の行に移動する必要があります。

画像グリッドやメイソンリー画像のコードのようなものを使用しますか？