كيفية إنشاء: تصميم العمودين

كيفية إنشاء تصميم العمودين

الخطوة الأولى - إضافة HTML:

<div class="صف"></div>
  <div class="عمود"></div>
  <div class="عمود"></div>
</div>

الخطوة الثانية - إضافة CSS:

في هذا المثال، سنقوم بإنشاء عمودينمتساوونالعمود:

مثال الفوating

.العمود {
  موجود في اليسار;
  عرض: 50%;
}
/* ازالة الحالة العلوية بعد العمود */
.الصف:after {
  المحتوى: "";
  عرض: table;
  ازالة الحالة العلوية;
}

جرب بنفسك

الطريقة الحديثة لإنشاء تصميم العمودين هي باستخدام CSS Flexbox. ولكن، لا يدعم Internet Explorer 10 وأقل.

مثال Flex

.الصف {
  عرض: flex;
}
.العمود {
  flex: 50%;
}

جرب بنفسك

يمكنك اختيار استخدام الفوating أو flex لإنشاء تصميم العمودين. ولكن، إذا كنت بحاجة إلى دعم IE10 وأقل، فعليك استخدام الفوating.

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

في هذا المثال، سنقوم بإنشاء عمودين غير متساوين في العرض:

مثال

.العمود {
  موجود في اليسار;
}
.اليسار {
  عرض: 25%;
}
.اليمين {
  عرض: 75%;
}

جرب بنفسك

في هذا المثال، سنقوم بإنشاءرد الفعلتخطيط العمودين:

مثال

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

جرب بنفسك

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

دليل:تخطيط الموقع لموقع الويب CSS

دليل:تصميم موقع الويب التفاعلي CSS