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

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

مرحله اول - اضافه کردن 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