في هذه المقالة ، سنناقش كل من الأساليب المذكورة واحدة تلو الأخرى ونقدم مثالًا مناسبًا لكل طريقة.
اذا هيا بنا نبدأ!
الطريقة الأولى: ضع قسمي Divs جنبًا إلى جنب في CSS باستخدام الشبكة
CSS ' جريد 'تخطيط يسمح للمستخدم بوضع اثنين أو أكثر من divs جنبًا إلى جنب. بشكل أساسي ، الشبكة هي قيمة خاصية العرض المستخدمة لإنشاء تخطيط يتكون من صفوف وأعمدة.
بناء الجملة
فيما يلي بناء جملة خاصية العرض مع تخطيط الشبكة:
العرض: الشبكة
الآن ، دعنا نتحقق من مثال يتعلق بوضع قسمين جنبًا إلى جنب في CSS باستخدام تخطيط الشبكة.
مثال
هنا ، سننشئ قسمين فرعيين داخل div الأصل ، بحيث يكون اسم الفئة ' الأبوين '،' طفل ' و ' طفل ':
< شعبة صف دراسي = 'الأبوين' >< شعبة صف دراسي = 'طفل' > < / شعبة >
< شعبة صف دراسي = 'طفل' > < / شعبة >
< / شعبة >
بعد ذلك في قسم CSS ، استخدم ' .الأبوين 'للوصول إلى div الأصل وتعيين قيمة خاصية العرض على أنها' جريد '. بعد ذلك ، اضبط الكسر باستخدام ' شبكة-قالب-أعمدة 'لإنشاء مساحة للأعمدة. في حالتنا ، سنضع الكسور على أنها ' 1 فرنك ' و ' 1 فرنك '، مما يعني أن كلا الجزأين قد اكتسبتا مساحة متساوية. علاوة على ذلك ، سنقوم بتعيين الفجوة بين عمودين باستخدام خاصية فجوة العمود ونحدد قيمتها على أنها ' 25px '.
CSS:
.الأبوين {عرض : جريد ؛
شبكة-قالب-أعمدة : 1fr 1fr ؛
فجوة العمود : 25px ؛
}
في الخطوة التالية ، نستخدم ' .طفل 'للوصول إلى كل من div الفرعي وتعيين ارتفاع divs على أنه' 250 بكسل 'واضبط لون الخلفية على' RGB (253 ، 5 ، 109) ':
.طفل {ارتفاع : 250 بكسل ؛
معرفتي : RGB ( 253 و 5 و 109 ) ؛
}
سيظهر هذا النتيجة التالية:
دعنا ننتقل إلى طريقة أخرى لوضع div جنبًا إلى جنب
الطريقة 2: ضع قسمي Divs جنبًا إلى جنب في CSS باستخدام flex
ال ' ثني 'هي قيمة خاصية العرض التي تسمح بوضع قسمي div جنبًا إلى جنب. تُستخدم هذه الخاصية لتعيين طول مرن للعنصر المرن. إنه يتقلص أو ينمو العنصر المرن ليلائم الحاوية الخاصة به.
بناء الجملة
فيما يلي بناء جملة خاصية العرض مع المرن:
العرض: فليكس ؛دعنا ننتقل إلى المثال لفهم المفهوم المذكور.
مثال
سننظر في نفس ملف HTML ونطبق ' ثني 'إلى الحاوية الرئيسية. هنا ، سنقوم بتعيين قيمة خاصية العرض على أنها مرنة ونضبط الفجوة بين divs الفرعية على أنها ' 10 بكسل ':
.الأبوين {عرض : ثني ؛
الفارق : 10 بكسل ؛
}
بعد ذلك ، عيّن العرض والارتفاع ولون خلفية div كـ ' 650 بكسل '،' 200 بكسل '، و 'RGB (0 ، 255 ، 42) '، على التوالى:
.طفل {العرض : 650 بكسل ؛
ارتفاع : 200 بكسل ؛
معرفتي : RGB ( 0 و 255 و 42 ) ؛
}
يتم إعطاء نتيجة الكود أدناه:
الطريقة الثالثة: ضع قسمي Divs جنبًا إلى جنب في CSS باستخدام float
تحدد خاصية CSS float الاتجاه العائم للعنصر. وبشكل أكثر تحديدًا ، يمكن استخدام هذه الخاصية لوضع قسمي div جنبًا إلى جنب في CSS.
بناء الجملة
صيغة الخاصية float هي:
تعويم: لا شيء | يسار | يمينفيما يلي وصف للقيم المذكورة أعلاه:
- لا أحد: يتم استخدامه لتقييد العائمة.
- اليسار: يتم استخدامه لتعويم العناصر على الجانب الأيسر.
- حقا: يتم استخدامه لتعويم العناصر على الجانب الأيمن.
دعنا ننتقل إلى مثال وضع div جنبًا إلى جنب.
مثال
الآن ، سننشئ قسمي div داخل علامة
ونخصص اسم الفئة كـ ' div1 ' و ' div2 ': < هيئة >< شعبة صف دراسي = 'div1' > < / شعبة >
< شعبة صف دراسي = 'div2' > < / شعبة >
< / هيئة >
ثم استخدام ' .div1 ' و ' .div2 'للوصول إلى الحاويات المضافة في قسم HTML. سنستخدم كلا الجزأين في نفس الفئة لأن الخصائص والقيم التي سنخصصها لكليهما هي نفسها.
بعد ذلك ، نقوم بتعيين قيمة خاصية الطفو على أنها ' اليسار 'وقم بتعيين عرض وارتفاع div كـ' خمسون٪ ' و ' 40٪ '. نستخدم أيضًا خاصية box-sizing ونحدد قيمتها على أنها ' مربع الحدود '. علاوة على ذلك ، قم بتعيين لون خلفية div كـ ' RGB (7 ، 255 ، 222) 'وتعيين قيم خاصية الحدود على أنها' 3 بكسل '،' صلب '، و ' RGB (255 ، 0 ، 255) ':
.div1 و .div2 {يطفو : اليسار ؛
العرض : خمسون٪ ؛
ارتفاع : 40٪ ؛
تحجيم الصندوق : مربع الحدود ؛
معرفتي : RGB ( 7 و 255 و 222 ) ؛
الحدود : 3 بكسل صلب RGB ( 255 و 0 و 255 ) ؛
}
ملحوظة: يمكنك وضع اثنين من divs جنبًا إلى جنب بدون استخدام خاصية box-sizing وخاصية border عن طريق تعيين ألوان الخلفية المختلفة لـ divs.
بمجرد تنفيذ الكود أعلاه ، ينفذ ملف HTML ويرى النتيجة:
ملحوظة: لإنشاء فجوة بين قسمي div ، قم أولاً بإنشاء div آخر ثم قم بتعيين هامش div وفقًا لذلك.
استنتاج
يمكن وضع عناصر Div جنبًا إلى جنب باستخدام ثلاث طرق مختلفة لـ CSS ، وهي ' ثني ' و ' جريد 'قيم خاصية العرض و' يطفو ' منشأه. كل طريقة تعمل بكفاءة ؛ ومع ذلك ، يمكنك الاستفادة من أي منها وفقًا لمتطلباتنا. في هذا الدليل ، ناقشنا ثلاث طرق لوضع div جنبًا إلى جنب باستخدام CSS وقدمنا أمثلة ذات صلة.