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

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

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

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

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

در این مثال، ما دو ستون ایجاد خواهیم کرد:برابرستون‌ها:

مثال شناور:

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

آزمایش کنید

روش مدرن برای ایجاد دو ستون، استفاده از CSS Flexbox است. اما این از نسخه‌های 10 و قبل از آن Internet Explorer پشتیبانی نمی‌کند.

مثال Flex

.row {
  نمایش: flex;
}
.column {
  flex: 50%;
}

آزمایش کنید

شما می‌توانید برای ایجاد دو ستون از float یا flex استفاده کنید. اما اگر نیاز به پشتیبانی از نسخه‌های 10 و قبل از آن IE دارید، باید از float استفاده کنید.

نکته:برای اطلاعات بیشتر در مورد Flexible Box Layout Module، لطفاً آموزش CSS Flexbox。

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

مثال

.column {
  float: left;
}
.left {
  عرض: 25%;
}
.right {
  عرض: 75%;
}

آزمایش کنید

در این مثال، ما یکرزپایزطراحی دو ستون:

مثال

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

آزمایش کنید

صفحات مرتبط

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

آموزش:طراحی وب رزپایز CSS