چگونه ایجاد کنیم: طرح چهار ستونی

چگونه یک طرح چهار ستونی ایجاد کنیم

مرحله اول - اضافه کردن HTML:

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

مرحله دوم - اضافه کردن CSS:

در این مثال، ما یک طرح چهار ستونی ایجاد خواهیم کرد:

مثال

.column {
  float: left;
  width: 25%;
}
/* پاکسازی شناور پس از ستون‌ها */
.row:after {
  content: "";
  display: table;
  clear: both;
}

تست شخصی بکنید

در این مثال، ما یکپاسخگوطرح چهار ستونی:

مثال

/* پیکربندی پاسخگو - هنگامی که عرض صفحه کمتر از 600px است، سه ستون را به جای قرار دادن به صورت موازی، به صورت پشته‌ای قرار می‌دهیم */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

تست شخصی بکنید

صفحات مرتبط

آموزش:چیدمان وب‌سایت CSS

آموزش:طراحی پاسخگو CSS