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

نقل العناصر من اليمين الى اليسار باستخدام css

Ahmad Saleh4

السؤال

مرحبا,

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

شكرا جزيلا

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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...