Bbcode 信息框

[Heliosurge (Dan DeMontmorency)]

我已经设法测试了对 2 列的支持。代码仍然非常基础/原始。

目前的代码只有 Redbox 的浮点选项。

// 测试浮点
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"]
# 信息框浮点
测试浮点
[/Wrap]

[wrap="redboxfr"]
# 信息框浮点
测试浮点
[/Wrap]
>
文本之后

• 注意：在行之间至少需要“>”，下方至少有文本。或者，您可以像我用于信息框标题一样，将下方文本放在“> 文本”旁边。

移动端截图

---

@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"]
# 信息框浮点
测试浮点
[/Wrap]

移动端截图

第一组只是使用浮动左侧 3 个自动换行！

我认为我将移动端的代码宽度设置为 44.5%。然后让桌面支持 3 列，宽度设置为 25%？

或者，如果您有更好的解决方案，允许移动端使用 2 列，桌面端使用 3 或 4 列。不过，需要根据列数调整宽度，并在移动端将其他列移至下一行。

也许可以使用类似图片中的网格或 Masonry 图片中的代码？