يعد وضع الكتل على صفحات الويب أحد المهام الرئيسية لمطور الويب. يمكن أن تكون القدرة على وضع كتلتين جنبا إلى جنب مفيدة عند إنشاء تخطيطات بأعمدة أو عناصر متعددة تحتاج إلى محاذاة أفقيا.
لتحقيق هذا الترتيب ، يمكنك استخدام خصائص كس من تعويم أو فليكسبوكس. أنها توفر المرونة في تحديد المواقع من العناصر وتسمح لك لخلق تخطيطات معقدة.
من وجهة نظر فنية ، يعد استخدام خاصية التعويم إحدى طرق وضع الكتل جنبا إلى جنب. للقيام بذلك ، تحتاج إلى تعيين قيمة تعويم في كس لكل كتلة تحتاج إلى محاذاة. تحدد القيمة اليسرى أو اليمنى الجانب الذي سيتم وضع الكتلة عليه.
مثال على الكود:
.بلوك {
تعويم: اليسار;
العرض: 50%;
}
هناك طريقة أخرى لوضع الكتل جنبا إلى جنب وهي استخدام خاصية فليكسبوكس. فليكس بوكس يسمح لك بالتحكم بمرونة في وضع العناصر داخل الحاوية ويضمن محاذاة تلقائية. لوضع كتلتين في صف واحد باستخدام فليكسبوكس ، تحتاج إلى تعيين العرض: فليكس الملكية للحاوية ، و فليكس الملكية للكتل: 1.
مثال على الكود:
.حاوية {
عرض: فليكس;
}
.بلوك {
فليكس: 1;
}
يعتمد اختيار كيفية وضع الكتل جنبا إلى جنب على متطلبات المشروع وميزات التخطيط. سيساعدك الدليل البسيط المقدم أعلاه على البدء في تخطيط الكتل وإنشاء تخطيطات جذابة.
- لترتيب كتلتين: دليل بسيط
- اختيار النمط المطلوب
- باستخدام خاصية الطفو
- باستخدام خاصية فليكس بوكس
- باستخدام شبكة المغلق
- تطبيق تحديد المواقع المطلق
- استقبال الهوامش والحشوات
- إنشاء تخطيط تكيفي مرن
- سؤال وجواب
- هل من الممكن استخدام العرض: خاصية مضمنة بدلا من العرض: كتلة مضمنة لوضع الكتل جنبا إلى جنب?
لوضع كتلتين: دليل بسيط
تتمثل إحدى المهام الشائعة في تطوير الويب في وضع كتلتين جنبا إلى جنب. في هذا الدليل ، سوف ننظر إلى طريقة سهلة لتحقيق هذا الهدف باستخدام كس.
أولا ، لنقم بإنشاء حاويتين كتلتين باستخدام العلامة
:
بلوك 1
بلوك 2
ثم سوف نحدد أنماط للحاوية وكتل:
- يوفر هذا الدليل البسيط مجموعة صغيرة من التعليمات لتحقيق النتيجة المرجوة. يمكنك استكماله بأنماطك الخاصة وتكييفه مع المتطلبات المحددة لمشروعك.
- ، والآخر —
- أو قيم أخرى وفقا لمتطلباتك.
الشبكة: المغلق تخطيط الشبكة يسمح لك لإنشاء شبكات من الخلايا وسهولة وضع كتل داخلها. لإنشاء كتلتين جنبا إلى جنب ، يمكنك تعيين
العرض: الشبكة ؛ خاصية للحاوية
، وتعيين موقفهم للكتل باستخدام الخصائص
الشبكة-العمود-ابدأ
,
نهاية عمود الشبكة
وغيرها من خصائص الشبكة ذات الصلة.
من المهم اختيار الطريقة الصحيحة ، اعتمادا على متطلبات مشروعك ودعم المتصفح الذي تريد تقديمه. فمن المستحسن استخدام الأساليب الحديثة مثل فليكسبوكس أو كس الشبكة ، إذا كان الوضع يسمح. ومع ذلك ، لا يزال الطفو حلا شائعا ويمكن أن يكون مفيدا في بعض الحالات.
باستخدام خاصية الطفو
تسمح لك خاصية التعويم بوضع الكتل بجانب بعضها البعض في اتجاه أفقي. يمكنك استخدام هذه الخاصية لإنشاء تخطيطات معقدة لصفحات الويب.
لاستخدام خاصية التعويم ، تحتاج أولا إلى تحديد نمط للكتلة التي سيتم تبسيطها. على سبيل المثال ، إذا كنت تريد إنشاء كتلتين جنبا إلى جنب ، فأنت بحاجة إلى تحديد الخاصية العائمة: اليسرى لكلا الكتلتين;
.تعويم اليسار {
تعويم: اليسار;