كيف - جداول جنبًا إلى جنب
تعرف على كيفية إنشاء جداول جنبًا إلى جنب باستخدام CSS.
كيفية وضع الجداول جنبًا إلى جنب
كيفية إنشاء جداول جنبًا إلى جنب باستخدام float
خاصية CSS:
مثال
* {
box-sizing: border-box;
}
/* Create a two-column
layout */
.column {
float: left;
width: 50%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
كيفية إنشاء جداول جنبًا إلى جنب باستخدام flex
خاصية CSS:
مثال
* {
box-sizing: border-box;
}
.row {
display: flex;
}
.column {
flex: 50%;
padding: 5px;
}
ملاحظة: Flexbox غير مدعوم في Internet Explorer 10 والإصدارات السابقة. الأمر متروك لك إذا كنت تريد استخدام الطفو أو الثني. ومع ذلك ، إذا كنت بحاجة إلى دعم IE10 وما بعده ، فيجب عليك استخدام تعويم.
نصيحة: لمعرفة المزيد حول وحدة تخطيط الصندوق المرن ، اقرأ فصل CSS Flexbox الخاص بنا .
أضف استجابة
لن يبدو المثال أعلاه جيدًا على جهاز محمول ، حيث سيشغل عمودان مساحة كبيرة جدًا من الصفحة. لإنشاء جدول سريع الاستجابة ، يجب أن ينتقل من تخطيط من عمودين إلى تخطيط كامل العرض على الأجهزة المحمولة ، أضف استعلامات الوسائط التالية:
مثال
/* Responsive layout - makes the two columns stack on top of each other
instead of next to each other on screens that are smaller than 600 px */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
نصيحة: انتقل إلى البرنامج التعليمي الخاص بجداول CSS لمعرفة المزيد حول كيفية تصميم الجداول.
نصيحة: انتقل إلى CSS Float Tutorial الخاص بنا لمعرفة المزيد عن خاصية float.
نصيحة: انتقل إلى البرنامج التعليمي لـ CSS Flexbox لمعرفة المزيد حول خاصية flex.