كيفية إنشاء: جداول موازية

كيفية جعل الجدول موازي

كيفية استخدام CSS float إنشاء جدول موازي:

مثال

* {
  تحديد الحجم: حاوية;
}
/* إنشاء تصميم عمودي */
.column {
  الانسياب: اليسار;
  عرض: 50%;
  ملء: 5px;
}
/* Clearfix (تنظيف الانسياب) */
.row::after {
  محتوى: "";
  تنظيف: كلاهما;
  عرض: جدول;
}

تجربة بنفسك

كيفية استخدام CSS flex إنشاء جدول موازي:

مثال

* {
  تحديد الحجم: حاوية;
}
.row {
  عرض: flex;
}
.column {
  flex: 50%;
  ملء: 5px;
}

تجربة بنفسك

ملاحظة:Flexbox غير مدعوم في Internet Explorer 10 وأقل. هل تريد استخدام float أو flex يعتمد ذلك عليك. ولكن إذا كنت بحاجة إلى دعم IE10 وأقل، فيجب عليك استخدام float.

نصيحة:للحصول على معلومات إضافية حول مodule Flexible Box Layout، يرجى قراءة دليل CSS Flexbox.

إضافة القدرة على التكيف

سيبدو المثال أعلاه غير جذاب على الأجهزة المحمولة لأن العمودين سيحتلان مساحة كبيرة من الصفحة.

لإنشاء جدول ديناميكي الاستجابة، مما يجعله يتحول من تصميم عمودي إلى تصميم كامل العرض على الأجهزة المحمولة، يرجى إضافة الاستعلام الإعلامي التالي:

مثال

/* تصميم ديناميكي استجابة - في الشاشات ذات أقل من 600 بكسل، يجعل الأعمدة تتراكم بدلاً من أن تكون موازية */
@media screen and (أقصى عرض: 600px) {
  .column {
    عرض: 100%;
  }
}

تجربة بنفسك

الصفحات ذات الصلة

دليل:CSS جدول

دليل:CSS ترفيع

دليل:CSS Flexbox