# صناديق معلومات BBcode

**URL:** <https://meta.discourse.org/t/bbcode-infoboxes/323332>\
**Category:** Development\
**Tags:** css\
**Created:** [26 أغسطس 2024، 12:53ص UTC](https://meta.discourse.org/t/bbcode-infoboxes/323332 "2024-08-26T00:53:10Z")\
**Posts on this page:** 1\
**Showing post:** 6

<div class="post-metadata">

**Author:** ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)\
**Post date:** [26 أغسطس 2024، 3:26م UTC](https://meta.discourse.org/t/bbcode-infoboxes/323332/6 "2024-08-26T15:26:36Z")

</div>

حسنًا، لقد تمكنت من اختبار دعم عمودين. الكود لا يزال أساسيًا جدًا/بدائيًا.

الكود حاليًا لديه خيارات عائمة فقط لـ Redbox.

```plaintext
// اختبار العائمة

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

```

لا يزال يتعين إضافة خيارات الألوان الأخرى.

كيفية الاستخدام في المنشور

```plaintext
[wrap="redboxfl"]
# معلومات عائمة
اختبار العائمة
[/Wrap]

[wrap="redboxfr"]
# معلومات عائمة
اختبار العائمة
[/Wrap]
>
نص لاحق

```

- **ملاحظة** : الرمز “\>” مطلوب بين الصفوف على الأقل مع النص أدناه. بدلاً من ذلك، يمكنك وضع النص أدناه بجوار “النص \>” بنفس الطريقة التي استخدمتها لعنوان مربع المعلومات.

> **لقطة شاشة للجوال**
>
> ![لقطة شاشة لتطبيق جوال، تعرض قائمة منسدلة بأربعة خيارات متعلقة بالعناصر العائمة في سياق رقمي. (تم التعليق بواسطة الذكاء الاصطناعي)](https://global.discourse-cdn.com/meta/original/4X/7/9/6/79624fb09780b5454f458d5354379da4a23180ee.jpeg)

* * *

@merefield هل يمكنني إضافة شيء إلى كل كود حالي في Op شيء مثل

```plaintext

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

```

~~لدي خيار للاستخدام في المنشور مثل؟~~ تم التأكيد على أنه يعمل!

```plaintext
[wrap="redbox" float="left"]
# معلومات عائمة
اختبار العائمة
[/Wrap]

```

> **لقطة شاشة للجوال**
>
> ![تعرض هذه الصورة لقطة شاشة لجهاز جوال مع قائمة بالعناصر العائمة المسماة بشكل مختلف. (تم التعليق بواسطة الذكاء الاصطناعي)](https://global.discourse-cdn.com/meta/original/4X/3/e/f/3ef8d94fa4c60396162002e4163f36fc0dbfe06f.png)
> 
> المجموعة الأولى تستخدم فقط العائمة لليسار 3 منها تلتف تلقائيًا!

أعتقد أنني أضفت الكود للجوال بعرض 44.5%. ثم أجعل دعم سطح المكتب يدعم 3 أعمدة ربما بعرض 25%؟

أو إذا كان لديك حل أفضل للسماح بعمودين في الجوال مع 3 أو 4 في سطح المكتب. على الرغم من أنه سيتعين تعديل العرض وفقًا لعدد الأعمدة ونقل الأعمدة الإضافية إلى السطر التالي إذا كان الجوال.

ربما استخدام شيء مثل شبكة من الصورة أو كود من صور الماسونري؟

---

_[View the full topic](https://meta.discourse.org/t/bbcode-infoboxes/323332)._