محاذاة رأسية لأعمدة الكتلة المضمونة

عند استخدام العرض: كتلة مضمّنة لإنشاء أعمدة ، يصبح من الواضح أنه عند إضافة المحتوى إلى العمود الأول ، تسجل الأعمدة اللامعة فائقة. يمكن حل ذلك عن طريق استخدام خاصية CSS العمودية. إلى إعلان CSS للحاوية. هذا يضمن أن جميع الأعمدة تتماشى رأسياً في الأعلى ، بغض النظر عن المحتوى داخل كل عمود.

. تابع span { العرض: كتلة مضمنة. المحاذاة الرأسية: أعلى ؛ الارتفاع: 100 ٪ رفع الخط: 100 ٪ ؛ العرض: 33.33 ٪ ؛ الخطوط العريضة: 1 بكسل متقطع أحمر. / * فقط للتوضيح */ }

.cont span {
    display: inline-block;
    vertical-align: top;
    height:100%;
    line-height: 100%;
    width: 33.33%;
    outline: 1px dashed red; /* Just for Demo */
}

على الرغم من أنه يمكن استخدام كتلة مضمنة لإنشاء أعمدة ، إلا أنه قد لا يكون الحل الأمثل بسبب مشكلات المساحة البيضاء المحتملة بين الأعمدة. فكر في استخدام Flex Box أو CSS بدلاً من ذلك ، لأنها توفر المزيد من التحكم في تخطيط الأعمدة والمحاذاة.