كيفية إنشاء: تخطيط ثلاثة أعمدة

كيفية إنشاء تخطيط ثلاثة أعمدة

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

<div class="row">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

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

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

مثال

.column {
  حركة: اليسار;
  عرض: 33.33%;
}
/* إزالة الارتفاع الزائد بعد الأعمدة */
.row:after {
  محتوى: "";
  عرض: طاولة;
  جعل: كلاهما;
}

تجربة شخصية

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

مثال

.column {
  حركة: اليسار;
}
.left, .right {
  عرض: 25%;
}
.middle {
  عرض: 50%;
}

تجربة شخصية

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

مثال

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

تجربة شخصية

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

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

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