في Tailwind CSS ، العناصر المستبدلة هي العناصر التي يتم استبدال محتواها بمورد خارجي ، مثل الصور ومقاطع الفيديو. في بعض الأحيان ، يواجه المستخدمون تحديًا لوضع عنصر مستبدل داخل الحاوية. هذا لأن هذه العناصر يمكن أن تتجاوز الحاوية إذا كان حجمها أكبر من المساحة المتاحة. يوفر Tailwind CSS فئات الأدوات المساعدة للتحكم في كيفية وضع محتوى العنصر المستبدل ومحاذاته داخل الحاوية.
توضح هذه المقالة طريقة وضع العناصر المستبدلة داخل حاوية في Tailwind CSS.
كيف يمكن وضع العناصر المستبدلة داخل حاوية في الريح الخلفية؟
لوضع العناصر المستبدلة داخل حاوية في Tailwind ، أنشئ برنامج HTML واستخدم ' الكائن- <الموضع / الجانب> 'المرافق مع العناصر المطلوبة. مطلوب تحديد الجانب المحدد ، أي اليسار ، أو اليمين ، أو المركز في الأداة المساعدة 'الكائن- <الموضع / الجانب>' لتحديد موضع العناصر المستبدلة.
بناء الجملة
< عنصر فصل = 'الكائن- <الموضع / الجانب> ...' > ... عنصر >
مثال
في هذا المثال ، سنصنع حاوية ونستخدم جميع ' الكائن- <الموضع / الجانب> 'المرافق مع' '(صورة) لتحديد موضعها المستبدل داخل الحاوية:
< جسم >
< شعبة فصل = 'bg-sky-300 grid-rows-3 grid-flow-col m-5 space-y-4 p-4 justify-between' >
< IMG فصل = 'كائن-بلا كائن-أعلى اليسار w-24 ساعة-24 بلدي -4' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< IMG فصل = 'غادر كائن - لا شيء - w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< IMG فصل = 'كائن-لا شيء-يسار-قاع w-24 ساعة -24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< IMG فصل = 'كائن - لا شيء - أعلى كائن w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< IMG فصل = 'مركز - لا شيء - كائن - w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< IMG فصل = 'كائن- بلا كائن- قاع w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< IMG فصل = 'كائن- بلا كائن- أعلى يمين w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< IMG فصل = 'كائن-لا شيء-يمين w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< IMG فصل = 'كائن - لا شيء - يمين - أسفل w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
شعبة >
جسم >
هنا ، في العنصر الأصل
- ' بي جي سكاي 300 'فئة' تعيين لون الخلفية للحاوية إلى السماء.
- ' شبكة 'فئة تتيح تخطيط الشبكة.
- ' صفوف الشبكة 3 تحدد فئة رقم الصفوف في الشبكة على 3.
- ' شبكة تدفق العمود تحدد فئة تدفق عناصر الشبكة في الأعمدة.
- ' م -5 يضيف فئة 5 وحدات من الهامش حول الحاوية.
- ' الفضاء- y-4 يضيف class مسافة رأسية من 4 وحدات بين عناصر
الفرعية داخل الحاوية.
- ' ص 4 'فئة تضيف 4 وحدات من الحشو إلى المحتوى داخل الحاوية.
- ' تبرير بين 'class تحاذي العناصر الفرعية داخل الحاوية وتوزعها بالتساوي.
في عناصر
:
- ' لا شيء لا تطبق فئة 'أي موضع على العنصر وتعرض العنصر في موضعه الافتراضي في الحاوية.
- ' كائن اليسار أعلى 'تضع الفئة عنصر
في الزاوية العلوية اليسرى للحاوية الخاصة بها.
- ' كائن اليسار 'class تحاذي العنصر إلى الحافة اليسرى للحاوية وتحافظ عليه في المنتصف رأسياً.
- ' وجوه اليسار القاع 'فئة تضع عنصر
في الركن السفلي الأيسر من الحاوية الخاصة به.
- ' قمة الكائن 'فئة تضع العنصر في الحافة العلوية لحايتها وتضعه في الوسط أفقيًا.
- ' مركز الكائن 'فئة تضع العنصر في وسط الحاوية وتحافظ على توسيطه أفقيًا ورأسيًا.
- ' الكائن السفلي 'فئة تضع العنصر عند الحافة السفلية لحاويته وتحافظ عليه في المنتصف أفقيًا.
- ' الكائن أعلى اليمين 'تضع الفئة عنصر
في الزاوية العلوية اليمنى للحاوية.
- ' كائن الحق 'تضع الفئة العنصر على الحافة اليمنى لحاوياتها وتحافظ على توسيطها رأسياً.
- ' كائن-يمين-أسفل 'تضع الفئة العنصر في الزاوية السفلية اليمنى للحاوية الخاصة به.
انتاج |
في صفحة الويب أعلاه ، يمكن ملاحظة أن كل محتوى العنصر الذي تم استبداله قد تم وضعه بنجاح.
خاتمة
لوضع العناصر المستبدلة داخل حاوية في Tailwind ، فإن ' الكائن- <الموضع / الجانب> 'يتم استخدام الأدوات المساعدة مع العناصر المطلوبة ، مثل الصور. يحتاج المستخدمون إلى تحديد موضع أو جانب معين ، أي يسار أو يمين أو مركز في الأداة المساعدة 'الكائن- <الموضع / الجانب>' لتحديد موضع العناصر المستبدلة. توضح هذه المقالة طريقة وضع العناصر المستبدلة داخل حاوية في Tailwind CSS.