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

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

گام اول - اضافه کردن 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 است. اما این پشتیبانی نمی‌کند Internet Explorer 10 و نسخه‌های قبل از آن.

مثال Flex

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

خودتان امتحان کنید

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

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

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

مثال

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

خودتان امتحان کنید

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

مثال

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

خودتان امتحان کنید

صفحات مرتبط

درس:CSS ویب لائن اپ

درس:CSS اورجیو ریسپانسیو ویب سائٹ ڈیزائن