اذهب إلى المحتوى

السؤال

نشر

مرحبا,

في تلك الصورة اريد نقل الزر الى اليسار ولكن فقط عندما يكون هناك صورة بالمنشور كما يظهر بالصورة المرفقة. ولكن اريد ان يبقى زر المنشور الذي بلا صورة كما هو على اليمين. مع العلم انهم ينتمون الى ذات الكلاس.  هل هناك حل لتلك المشكلة؟

شكرا جزيلا

Screenshot (264)_LI.jpg

Recommended Posts

  • 0
نشر
بتاريخ 13 ساعات قال Ahmad Saleh2:

المشكلة هي انني اريد ان يكون الزر على اليسار فقط بحال كان يوجد صورة داخل المنشور. اما ان لم يكن هنالك صورة داخل المنشور فيجب ان يكون الزر على اليمين.

هذا الفرق بين الحالتين في الكلاسات.

إذا لاحظت أنه حتى تُحدد العُنصر الحاوي للزر لتلك المنشورات التي تحتوي على صور فقط هناك شيء إضافي و هو صنف has-post-thumbnail الذي يتواجد في وسم article الذي يحتوي على صورة و لا يتواجد في غيره، من خلاله يُمكنك تحديد العناصر المطلوبة التي تريد أن يكون تنسيقها مختلف:

article.has-post-thumbnail .page-box .box-content .readmore-btn{
  
}

لاحظ لا يوجد فراغ بين article و has-post-thumbnail. في المحدد لاننا نريد العُنصر article و في نفس الوقت يملك الصنف has-post-thumbnail

  • 0
نشر

اذا كان لديك نفس العنصرين -الصورة والزر- في نفس الحاوية ولوحدهما فقط يمكنك اعطاء الحاوية الخاصية display وقيمتها flex , ونقوم باعطاء الصورة خاصية margin من جهة اليسار وقيمتها auto , لاحظ المثال التالي

    <div style="display: flex;">
        <img src="1.png" alt="" style="margin-right: auto;">
        <a href="#">Test</a>
    </div>

لدينا الحاوية div وأعطيتها الخاصية display وقيمتها flex , تحتوي على العنصرين الصورة والزر فقط , أعطيت الصورة الخاصية margin-right وقيمتها auto , لاحظ النتائج في حال وجود صورة
image_2022-01-07_224709.thumb.png.9cee7898855ebf2cebaa37918164e21c.png
النتيجة في حال عدم وجود صورة
image_2022-01-07_224733.thumb.png.816d8d9a72ae3d9a1befbd17ba44a5cd.png

  • 0
نشر
بتاريخ 21 ساعات قال محمد أبو عواد:

اذا كان لديك نفس العنصرين -الصورة والزر- في نفس الحاوية ولوحدهما فقط يمكنك اعطاء الحاوية الخاصية display وقيمتها flex , ونقوم باعطاء الصورة خاصية margin من جهة اليسار وقيمتها auto , لاحظ المثال التالي


    <div style="display: flex;">
        <img src="1.png" alt="" style="margin-right: auto;">
        <a href="#">Test</a>
    </div>

لدينا الحاوية div وأعطيتها الخاصية display وقيمتها flex , تحتوي على العنصرين الصورة والزر فقط , أعطيت الصورة الخاصية margin-right وقيمتها auto , لاحظ النتائج في حال وجود صورة
image_2022-01-07_224709.thumb.png.9cee7898855ebf2cebaa37918164e21c.png
النتيجة في حال عدم وجود صورة
image_2022-01-07_224733.thumb.png.816d8d9a72ae3d9a1befbd17ba44a5cd.png

لقد جربت طريقتك لكن لم تنحل المشكلة. هل يمكنني ارسال ملف المشروع للمساعدة؟

Screenshot (267).png

  • 0
نشر
بتاريخ 1 ساعة قال Ahmad Saleh2:

اريد النتيجة ان تكون كتلك الصورة

غير واضحة هيكلية العناصر، من الصور التي أرفقتها وجدت أن الزر بداخل وسم div الذي يملك الصنف readmore-btn، يُمكنك إستخدام خصائص الصندوق المرن flexbox بإعطاء التنسيقات التالية له:

.readmore-btn{
  display: flex;
  justify-content: end;
}

لاحظ أنني أعطيت العُنصر الحاوي للزر الخاصية flex حتى يُصبح صندوقاً مرنا لنستطيع التحكم في توزيع العناصر داخله بسهولة، و بما أننا نريد أن يظهر الزر في الأخير استخدمت الخاصية justify-content التي تُساعد في تموضع العناصر على المحور x و بالتالي أعطيتها القيمة end.

يُمكنك الإطلاع على المثال على codepen فهو يُشبه وضعيتك:

 

  • 0
نشر
بتاريخ 23 ساعات قال عبود سمير:

غير واضحة هيكلية العناصر، من الصور التي أرفقتها وجدت أن الزر بداخل وسم div الذي يملك الصنف readmore-btn، يُمكنك إستخدام خصائص الصندوق المرن flexbox بإعطاء التنسيقات التالية له:


.readmore-btn{
  display: flex;
  justify-content: end;
}

لاحظ أنني أعطيت العُنصر الحاوي للزر الخاصية flex حتى يُصبح صندوقاً مرنا لنستطيع التحكم في توزيع العناصر داخله بسهولة، و بما أننا نريد أن يظهر الزر في الأخير استخدمت الخاصية justify-content التي تُساعد في تموضع العناصر على المحور x و بالتالي أعطيتها القيمة end.

يُمكنك الإطلاع على المثال على codepen فهو يُشبه وضعيتك:

 

المشكلة هي انني اريد ان يكون الزر على اليسار فقط بحال كان يوجد صورة داخل المنشور. اما ان لم يكن هنالك صورة داخل المنشور فيجب ان يكون الزر على اليمين.

هذا الفرق بين الحالتين في الكلاسات.

Screenshot (270)_LI.jpg

  • 0
نشر
بتاريخ 8 ساعات قال عبود سمير:

إذا لاحظت أنه حتى تُحدد العُنصر الحاوي للزر لتلك المنشورات التي تحتوي على صور فقط هناك شيء إضافي و هو صنف has-post-thumbnail الذي يتواجد في وسم article الذي يحتوي على صورة و لا يتواجد في غيره، من خلاله يُمكنك تحديد العناصر المطلوبة التي تريد أن يكون تنسيقها مختلف:


article.has-post-thumbnail .page-box .box-content .readmore-btn{
  
}

لاحظ لا يوجد فراغ بين article و has-post-thumbnail. في المحدد لاننا نريد العُنصر article و في نفس الوقت يملك الصنف has-post-thumbnail

شكرا جزيلا لقد حلت تلك المشكلة. 

اتمنى لكم دوام التوفيق

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...