خاصية عرض العمود في CSS
مثال
حدد أن عرض العمود يجب أن يكون 100 بكسل:
div
{
column-width: 100px;
}
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
تحدد الخاصية عرض column-widthالعمود.
سيكون عدد الأعمدة هو الحد الأدنى لعدد الأعمدة اللازمة لإظهار كل المحتوى عبر العنصر.
column-widthهي خاصية مرنة. فكر في
column-widthاقتراح الحد الأدنى للعرض للمتصفح. بمجرد أن يتعذر على المتصفح احتواء عمودين على الأقل بالعرض المحدد ، ستتوقف الأعمدة وتنخفض في عمود واحد.
| القيمة الافتراضية: | تلقاءي |
|---|---|
| وارث: | رقم |
| متحرك: | نعم. اقرأ عن animatable |
| الإصدار: | CSS3 |
| بناء جملة JavaScript: | الكائن .style.columnWidth = "100px" |
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.
تحدد الأرقام المتبوعة بـ -webkit- أو -moz- الإصدار الأول الذي يعمل مع بادئة.
| Property | |||||
|---|---|---|---|---|---|
| column-width | 50.0 4.0 -webkit- |
10.0 | 52.0 2.0 -moz- |
9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
بنية CSS
column-width: auto|length|initial|inherit;
قيم الملكية
| Value | Description | Play it |
|---|---|---|
| auto | Default value. The column width will be determined by the browser | |
| length | A length that specifies the width of the columns. The number of columns will be the minimum number of columns needed to show all the content across the element. Read about length units | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
مزيد من الأمثلة
مثال
قسّم النص في عنصر <div> إلى ثلاثة أعمدة:
div
{
column-count: 3;
}
مثال
حدد فجوة 40 بكسل بين الأعمدة:
div
{
column-gap: 40px;
}
مثال
حدد عرض القاعدة ونمطها ولونها بين الأعمدة:
div
{
column-rule: 4px double #ff00ff;
}
الصفحات ذات الصلة
دروس CSS: أعمدة CSS المتعددة
مرجع DOM HTML: خاصية عرض العمود