كيفية إنشاء: أعمدة متساوية الارتفاع

تعلم كيفية إنشاء أعمدة متساوية الارتفاع باستخدام CSS.

كيفية إنشاء أعمدة متساوية الارتفاع

عندما تكون الأعمدة يجب أن تظهر بشكل متوازي، عادةً ما ترغب في أن تكون لها نفس الارتفاع (تطابق الارتفاع الأعلى).

جرب بنفسك

الخطوة الأولى - إضافة HTML:

<div class="col-container">
  <div class="col">
    <h2>عمود 1</h2>
    <p>مرحبًا بك في العالم</p>
  </div>
  <div class="col">
    <h2>عمود 2</h2>
    <p>مرحبًا بك في العالم!</p>
    <p>مرحبًا بك في العالم!</p>
    <p>مرحبًا بك في العالم!</p>
    <p>مرحبًا بك في العالم!</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