Инфобоксы BBCode

Разработка
6

Хорошо, мне удалось протестировать поддержку двух колонок. Код пока довольно базовый/примитивный.

На данный момент код содержит только опции с плавающим позиционированием (float) для Redbox.

// Тестирование 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"]
# Плавающий инфобокс

Тестирование float
[/Wrap]

[wrap="redboxfr"]
# Плавающий инфобокс

Тестирование float
[/Wrap]
>
Текст после
  • Примечание: Символ “>” обязателен между строками, если ниже есть текст. Альтернативно, вы можете разместить текст под строкой рядом с “> Текст”, как я сделал это для заголовка инфобокса.
Скриншот (мобильное устройство)

Изображение представляет собой скриншот мобильного приложения, показывающий выпадающее меню с четырьмя опциями, связанными с плавающими элементами в цифровом контексте. (Подпись сгенерирована ИИ)
Изображение представляет собой скриншот мобильного приложения, показывающий выпадающее меню с четырьмя опциями, связанными с плавающими элементами в цифровом контексте. (Подпись сгенерирована ИИ)864×1544 170 KB

@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"]
# Плавающий инфобокс

Тестирование float
[/Wrap]
Скриншот (мобильное устройство)

Изображение демонстрирует скриншот мобильного устройства со списком плавающих элементов с разными именами. (Подпись сгенерирована ИИ)
Изображение демонстрирует скриншот мобильного устройства со списком плавающих элементов с разными именами. (Подпись сгенерирована ИИ)862×1222 120 KB

Первая группа использует только float: left; три элемента автоматически переносятся!

Думаю, если я добавлю код для мобильных устройств с шириной 44.5%, то для десктопа можно реализовать поддержку трёх колонок, возможно, установив ширину в 25%?

Или, если у вас есть лучшее решение, позволяющее иметь две колонки на мобильных и три или четыре на десктопе. Хотя в этом случае ширина должна адаптироваться в зависимости от количества колонок, а дополнительные колонки должны переноситься на новую строку на мобильных устройствах.

Может быть, стоит использовать что-то вроде grid из изображения или код из masonry-изображения?