طريقة استخدام خاصية column-width في CSS3 ومثال

يحدد خاصية column-width CSS عرض الأعمدة الأمثل في عناصر الصف المضاعف. هذا ليس قيمة مطلقة، يمكن للمتصفح تعديل عرض الأعمدة بناءً على قيم خصائص أخرى، خاصةًcolumn-count.

الجدول التالي يوضح استخدامه وأرشيف إصدارات هذا الميزة، بالإضافة إلى синтكس الاستخدام في لغة الجافاسكربت.

نحو استخدام column-width

نص النحو لهذه الخاصية هو:

column-width:　length　|　auto　|　initial　|　inherit

المثال التالي يوضح كيفية استخدام خاصية column-width.

p　{
　　　　-webkit-column-width:　150px;　/*　Chrome,　Safari,　Opera　*/
　　　　　　　-moz-column-width:　150px;　/*　Firefox　*/
　　　　　　　　　　　　column-width:　150px;　
}

قيمة الخاصية

جدول التالي يصف القيم لهذه الخاصية.

تطابق المتصفحات

تطابق المتصفحات للميزة column-width، الأرقام في الجدول التالي تعكس إصدار المتصفح الأدنى الذي يدعم هذه الميزة؛ جميع المتصفحات الشائعة يدعمون هذه الميزة.

قراءة متعمقة

يرجى الرجوع إلى التعليمات التالية:تخطيط العمود المتعدد CSS3.

خصائص ذات صلة:column-span,column-fill,column-gap,column-rule,column-rule-color,column-rule-style,column-rule-width,column-count,columns.