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

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

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

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

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

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

مثال

.column {
  غرق: يمين;
  عرض: 25%;
}
/* تنظيف العلوية بعد الأعمدة */
.row:after {
  محتوى: "";
  عرض: جدول;
  تنظيف: كلاهما;
}

تجربة بنفسك

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

مثال

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

تجربة بنفسك

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

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

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