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

خطأ في تنسيق عنصري div ليتم وضعهما بجانب بعضهما في CSS

Mohammed Hhhh

السؤال

لماذا لايقوم بجعل العنصرين يأتيان بجانب بعضهما البعض

d.png

بتاريخ 22 دقائق مضت قال Mohammmed Mahmoud:

لماذا لايقوم بجعل العنصرين يأتيان بجانب بعضهما البعض

d.png

كود css

html {box-sizing: border-box;}



*, *:before, *:after {box-sizing: inherit;}  



div{

    width: 50% ;

    height: 200px ;

    padding: 10px ;

    border: solid red 2px ;

    /* box-sizing: border-box ; --don't write this proparty here write it for evrey tag in the page*/

}


 

تم التعديل في بواسطة Hassan Hedr
تنسيق الشيفرة وتوضيح العنوان
رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0
بتاريخ 1 دقيقة مضت قال Mohammmed Mahmoud:

انا قمت بتجريب float:left و نجحت معي استخدم اية طريقة 

يمكن أيضًا استخدام طريقة float وسيتم تعويم العنصر على يسار العناصر التي تسبقه، في حال كان سؤالك عن لماذا لم ينفع تحديد عرض العنصر ب 50% لوضع العناصر بجانب بعضها فالسبب هو خاصية display وقيمتها الافتراضية ل div

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

العنصر div هو من عناصر block أي يأخذ سطرًا كاملًا ضمن الصفحة حتى ولو كان يوجد مسافة في الأعلى يمكن وضعه بها، لحل تلك المشكلة يمكن تعديل خاصية display له لتكون inline-block كالتالي:

div {
 display: inline-block;
}

يمكنك الاستفادة من قراءة المقال التالي لمعرفة المزيد عن اساسيات التنسيق:

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 4 دقائق مضت قال Hassan Hedr:

العنصر div هو من عناصر block أي يأخذ سطرًا كاملًا ضمن الصفحة حتى ولو كان يوجد مسافة في الأعلى يمكن وضعه بها، لحل تلك المشكلة يمكن تعديل خاصية display له لتكون inline-block كالتالي:


div {
 display: inline-block;
}

 

انا قمت بتجريب float:left و نجحت معي استخدم اية طريقة 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...