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

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

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

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

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

في هذا المثال، سنقوم بإنشاء تخطيط أربعة أعمدة، والذي سيتحول إلى صفحتين عند عرض أقل من 900 بكسل. ولكن عند عرض أقل من 600 بكسل، ستتداخل الأعمدة بدلاً من أن تكون متوازية.

/* إنشاء أربعة أعمدة متساوية في العرض، وجعلها تطفو معًا */
.column {
  رقص: يسار;
  عرض: 25%;
}
/* تنظيف الرقص */
.row:after {
  محتوى: "";
  عرض: طاولة;
   تنظيف: كلاهما;
}
/* تصميم استجابي - يجعل التخطيط يتكون من صفحتين بدلاً من أربع صفحات */
@media screen and (أقصى عرض: 900px) {
  .column {
    عرض: 50%;
  }
}
/* تصميم استجابي - يجعل الصفحتين تتراكب بدلاً من أن تكونا متوازيتين */
@media screen and (أقصى عرض: 600px) {
  .column {
    عرض: 100%;
  }
}

تجربة بنفسك

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

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

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