كيف - ارتفاع متساوي
تعرف على كيفية إنشاء أعمدة متساوية الارتفاع باستخدام CSS.
كيفية إنشاء أعمدة متساوية الارتفاع
عندما يكون لديك أعمدة يجب أن تظهر جنبًا إلى جنب ، فغالبًا ما تريد أن تكون ذات ارتفاع متساوٍ (تطابق ارتفاع الأطول).
المشكلة:
الرغبة:
الخطوة 1) أضف HTML:
مثال
<div class="col-container">
<div class="col">
<h2>Column 1</h2>
<p>Hello World</p>
</div>
<div class="col">
<h2>Column 2</h2>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
</div>
<div class="col">
<h2>Column 3</h2>
<p>Some other text..</p>
<p>Some other text..</p>
</div>
</div>
الخطوة 2) أضف CSS:
مثال
.col-container {
display: table; /* Make the
container element behave like a table */
width: 100%; /*
Set full-width to expand the whole page */
}
.col {
display: table-cell; /* Make elements inside the container behave like table
cells */
}
ارتفاع استجابة متساوي
الأعمدة التي أنشأناها في المثال السابق متجاوبة (إذا قمت بتغيير حجم نافذة المتصفح في مثال المحاولة ، فسترى أنها تتكيف تلقائيًا مع العرض والارتفاع اللازمين). ومع ذلك ، بالنسبة للشاشات الصغيرة (مثل الهواتف الذكية) ، قد ترغب في تكديسها رأسيًا بدلاً من أفقيًا:
على الشاشات المتوسطة والكبيرة:
مرحبا بالعالم.
مرحبا بالعالم.
مرحبا بالعالم.
مرحبا بالعالم.
مرحبا بالعالم.
على الشاشات الصغيرة:
مرحبا بالعالم.
مرحبا بالعالم.
مرحبا بالعالم.
مرحبا بالعالم.
مرحبا بالعالم.
لتحقيق ذلك ، أضف استعلام وسائط وحدد قيمة بكسل نقطة التوقف عندما يجب أن يحدث ذلك:
مثال
/* If the browser window is smaller than 600px, make the columns stack on top
of each other */
@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;
}
ملاحظة: Flexbox غير مدعوم في Internet Explorer 10 والإصدارات السابقة.
نصيحة: اقرأ المزيد عن الصناديق المرنة في برنامجنا التعليمي لـ CSS Flexbox .