چگونه ایجاد کنیم: پیکربندی سه ستون

چگونه پیکربندی سه ستون ایجاد کنیم

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

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

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

در این مثال، ما سهبا عرض برابرستون‌های:

مثال

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

آزمایش شخصی

در این مثال، ما سهبا عرض نابرابرستون‌های:

مثال

.column {
  float: left;
}
.left, .right {
  عرض: 25%;
}
.middle {
  عرض: 50%;
}

آزمایش شخصی

در این مثال، ما یکواکنشگراپیکربندی سه ستون:

مثال

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

آزمایش شخصی

صفحات مرتبط

آموزش:طراحی وب‌سایت CSS

آموزش:طراحی واکنش‌گرای CSS