چگونه ایجاد: ستون‌های یکسان ارتفاع

آموزش اینکه چگونه با استفاده از CSS ستون‌های یکسان ارتفاع داشته باشند ایجاد کنید.

چگونه ستون‌های یکسان ارتفاع داشته باشند ایجاد کنید

وقتی که باید ستون‌های شما به صورت پارالل نمایش داده شوند، معمولاً می‌خواهید آنها ارتفاع یکسانی داشته باشند (با ارتفاع بیشترین ارتفاع هماهنگ).

آزمایش کنید

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

<div class="col-container">
  <div class="col">
    <h2>ستون 1</h2>
    <p>Hello World</p>
  </div>
  <div class="col">
    <h2>ستون 2</h2>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
  </div>
  <div class="col">
    <h2>ستون 3</h2>
    <p>متن دیگری...</p>
    <p>متن دیگری...</p>
  </div>
</div>

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

.col-container {
  display: table; /* باعث می‌شود عناصر کانتینر مانند عناصر جدول به نظر برسند */
  width: 100%; /* به عنوان عرض کامل تنظیم شود تا کل صفحه گسترش یابد */
}
.col {
  display: table-cell; /* باعث می‌شود عناصر داخل کانتینر مانند سلول‌های جدول به نظر برسند */
}

آزمایش کنید

ارتفاع واکنش‌پذیر

ستون‌هایی که در مثال قبلی ایجاد کردیم، واکنش‌پذیر هستند (اگر اندازه پنجره مرورگر خود را تغییر دهید، خواهید دید که به طور خودکار به اندازه و ارتفاع مورد نیاز تنظیم می‌شوند). اما، برای صفحه‌های کوچک (مانند تلفن‌های هوشمند)، ممکن است بخواهید آنها به صورت عمودی بر روی هم قرار گیرند به جای قرار گرفتن افقی:

برای انجام این کار، یک پرسش‌وپاسخ رسانه‌ای اضافه کنید و یک پیکسلی برای این قطع تعیین کنید:

مثال

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

آزمایش کنید

با استفاده از Flexbox ارتفاع و عرض یکسان ایجاد کنید

شما همچنین می‌توانید با استفاده از Flexbox جعبه‌های یکسان ارتفاع داشته باشید:

مثال

.col-container {
  display: flex;
  width: 100%;
}
.col {
  flex: 1;
  padding: 16px;
}

آزمایش کنید

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

صفحات مرتبط

آموزش‌ها:CSS Flexbox