Ahmad Saleh4 نشر 7 يناير 2022 أرسل تقرير مشاركة نشر 7 يناير 2022 مرحبا, في تلك الصورة اريد نقل الزر الى اليسار ولكن فقط عندما يكون هناك صورة بالمنشور كما يظهر بالصورة المرفقة. ولكن اريد ان يبقى زر المنشور الذي بلا صورة كما هو على اليمين. مع العلم انهم ينتمون الى ذات الكلاس. هل هناك حل لتلك المشكلة؟ شكرا جزيلا 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 سمير عبود نشر 10 يناير 2022 أرسل تقرير مشاركة نشر 10 يناير 2022 بتاريخ 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 2 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمد أبو عواد نشر 7 يناير 2022 أرسل تقرير مشاركة نشر 7 يناير 2022 اذا كان لديك نفس العنصرين -الصورة والزر- في نفس الحاوية ولوحدهما فقط يمكنك اعطاء الحاوية الخاصية 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 , لاحظ النتائج في حال وجود صورة النتيجة في حال عدم وجود صورة اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Ahmad Saleh4 نشر 8 يناير 2022 الكاتب أرسل تقرير مشاركة نشر 8 يناير 2022 بتاريخ 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 , لاحظ النتائج في حال وجود صورة النتيجة في حال عدم وجود صورة لقد جربت طريقتك لكن لم تنحل المشكلة. هل يمكنني ارسال ملف المشروع للمساعدة؟ اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Ahmad Saleh4 نشر 8 يناير 2022 الكاتب أرسل تقرير مشاركة نشر 8 يناير 2022 اريد النتيجة ان تكون كتلك الصورة 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 بلال زيادة نشر 8 يناير 2022 أرسل تقرير مشاركة نشر 8 يناير 2022 هل يمكنك تجربة استخدام خاصية التعويم float للزر ، كما في الشكل التالي float:left ثم تخبرني بالنتيجة ؟ اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 سمير عبود نشر 8 يناير 2022 أرسل تقرير مشاركة نشر 8 يناير 2022 بتاريخ 1 ساعة قال Ahmad Saleh2: اريد النتيجة ان تكون كتلك الصورة غير واضحة هيكلية العناصر، من الصور التي أرفقتها وجدت أن الزر بداخل وسم div الذي يملك الصنف readmore-btn، يُمكنك إستخدام خصائص الصندوق المرن flexbox بإعطاء التنسيقات التالية له: .readmore-btn{ display: flex; justify-content: end; } لاحظ أنني أعطيت العُنصر الحاوي للزر الخاصية flex حتى يُصبح صندوقاً مرنا لنستطيع التحكم في توزيع العناصر داخله بسهولة، و بما أننا نريد أن يظهر الزر في الأخير استخدمت الخاصية justify-content التي تُساعد في تموضع العناصر على المحور x و بالتالي أعطيتها القيمة end. يُمكنك الإطلاع على المثال على codepen فهو يُشبه وضعيتك: اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Ahmad Saleh4 نشر 9 يناير 2022 الكاتب أرسل تقرير مشاركة نشر 9 يناير 2022 بتاريخ 23 ساعات قال عبود سمير: غير واضحة هيكلية العناصر، من الصور التي أرفقتها وجدت أن الزر بداخل وسم div الذي يملك الصنف readmore-btn، يُمكنك إستخدام خصائص الصندوق المرن flexbox بإعطاء التنسيقات التالية له: .readmore-btn{ display: flex; justify-content: end; } لاحظ أنني أعطيت العُنصر الحاوي للزر الخاصية flex حتى يُصبح صندوقاً مرنا لنستطيع التحكم في توزيع العناصر داخله بسهولة، و بما أننا نريد أن يظهر الزر في الأخير استخدمت الخاصية justify-content التي تُساعد في تموضع العناصر على المحور x و بالتالي أعطيتها القيمة end. يُمكنك الإطلاع على المثال على codepen فهو يُشبه وضعيتك: المشكلة هي انني اريد ان يكون الزر على اليسار فقط بحال كان يوجد صورة داخل المنشور. اما ان لم يكن هنالك صورة داخل المنشور فيجب ان يكون الزر على اليمين. هذا الفرق بين الحالتين في الكلاسات. اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Ahmad Saleh4 نشر 10 يناير 2022 الكاتب أرسل تقرير مشاركة نشر 10 يناير 2022 بتاريخ 8 ساعات قال عبود سمير: إذا لاحظت أنه حتى تُحدد العُنصر الحاوي للزر لتلك المنشورات التي تحتوي على صور فقط هناك شيء إضافي و هو صنف has-post-thumbnail الذي يتواجد في وسم article الذي يحتوي على صورة و لا يتواجد في غيره، من خلاله يُمكنك تحديد العناصر المطلوبة التي تريد أن يكون تنسيقها مختلف: article.has-post-thumbnail .page-box .box-content .readmore-btn{ } لاحظ لا يوجد فراغ بين article و has-post-thumbnail. في المحدد لاننا نريد العُنصر article و في نفس الوقت يملك الصنف has-post-thumbnail شكرا جزيلا لقد حلت تلك المشكلة. اتمنى لكم دوام التوفيق 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
Ahmad Saleh4
مرحبا,
في تلك الصورة اريد نقل الزر الى اليسار ولكن فقط عندما يكون هناك صورة بالمنشور كما يظهر بالصورة المرفقة. ولكن اريد ان يبقى زر المنشور الذي بلا صورة كما هو على اليمين. مع العلم انهم ينتمون الى ذات الكلاس. هل هناك حل لتلك المشكلة؟
شكرا جزيلا
رابط هذا التعليق
شارك على الشبكات الإجتماعية
8 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.