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

اذا كان لديك نفس العنصرين -الصورة والزر- في نفس الحاوية ولوحدهما فقط يمكنك اعطاء الحاوية الخاصية 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 , لاحظ النتائج في حال وجود صورة

النتيجة في حال عدم وجود صورة

بتاريخ 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 , لاحظ النتائج في حال وجود صورة

النتيجة في حال عدم وجود صورة

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

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

هل يمكنك تجربة استخدام خاصية التعويم float للزر ، كما في الشكل التالي 

float:left

ثم تخبرني بالنتيجة ؟

بتاريخ 1 ساعة قال Ahmad Saleh2:

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

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

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

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

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

بتاريخ 23 ساعات قال عبود سمير:

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

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

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

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

 

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

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

بتاريخ 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

بتاريخ 8 ساعات قال عبود سمير:

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

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

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

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

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