الخاصية column-count
< CSS
اذهب إلى التنقل
اذهب إلى البحث
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.
الخاصية column-count
في CSS هي تُحدِّد ما هو عدد الأعمدة التي سينقسم العنصر إليها.
بطاقة الخاصية
القيمة الابتدائية | auto
|
---|---|
تُطبَّق على | جميع الحاويات الكتلية (block containers) عدا حاويات الجداول. |
قابلة للوراثة | لا |
قابلة للتحريك | نعم |
القيمة المحسوبة | كما حُدِّدَت. |
/* <integer> قيمة عددية */
column-count: 3;
/* كلمة محجوزة */
column-count: auto;
/* القيم العامة */
column-count: inherit;
column-count: initial;
column-count: unset;
أمثلة
مثال على استخدام الخاصية column-count
وضبط قيمتها إلى 3
:
<p class="content-box">
هذه فقرةٌ نصيةٌ ستُقسَم إلى ثلاثة أعمدة باستخدام CSS،
لاحظ أنَّ النص سيوزَّع بالتساوي بين الأعمدة.
</p>
شيفرة CSS:
.content-box {
margin: 1em;
padding: 1em;
width: 400px;
border: 1px solid #eaecf0;
background-color: #f8f9fa;
column-count: 3;
}
مثال على ضبط قيمة الخاصية column-count
إلى 3
للإشارة إلى العدد الأقصى للأعمدة، وسنضبط قيمة الخاصية column-width
إلى 150px
:
<p class="content-box">
هذه فقرةٌ نصيةٌ ستُقسَم إلى عمودين باستخدام CSS،
لاحظ أنَّ النص سيوزَّع بالتساوي بين الأعمدة.
</p>
شيفرة CSS:
.content-box {
margin: 1em;
padding: 1em;
width: 400px;
border: 1px solid #eaecf0;
background-color: #f8f9fa;
column-count: 3 ;
column-width: 150px;
}
دعم المتصفحات
الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
الدعم الأساسي | 4.0 (مع السابقة -webkit- )
50 (دون سابقة) |
2.0 (مع السابقة -moz- )
|
10 | 15 (مع السابقة -webkit- )
37 (دون سابقة) |
3.1 (مع السابقة -webkit- )
10 (دون سابقة) |
البنية العامة
تقبل الخاصية column-count
قيمةً واحدةً أو قيمتين.
auto
تُشير هذه الكلمة المحجوزة إلى أنَّ عدد الأعمدة سيُحدَّد عبر خاصيات CSS الأخرى مثل column-width
.
<integer>
عدد صحيح موجب <integer>
يُحدِّد العدد المثالي للأعمدة التي يجب تقسيم المحتوى إليها، وإذا ضٌبِطَت الخاصية column-width
إلى قيمة لا تساوي auto
، فستُشير هذه القيمة إلى العدد الأقصى من الأعمدة المسموحة.
البنية الرسمية
column-count: <integer> | auto;
انظر أيضًا
- صفحة الخاصية
column-fill
التي تُحدِّد كيف يجب تقسيم المحتوى على الأعمدة. - صفحة الخاصية
column-gap
التي تضبط حجم الفراغ بين الأعمدة في العناصر متعددة الأعمدة. - صفحة الخاصية
column-rule
التي تُحدِّد شكل الخط العمودي (rule) الذي سيُرسَم بين الأعمدة في العناصر متعددة الأعمدة، والخاصيات الفرعية لهذه الخاصية وهيcolumn-rule-color
وcolumn-rule-style
وcolumn-rule-width
. - صفحة الخاصية
column-span
التي سمح بأن يمتد أحد العناصر على جميع الأعمدة وذلك عند ضبط القيمةall
لها. - صفحة الخاصية
column-width
التي تُحدِّد ما هو العرض الأدنى للأعمدة التي سينقسم العنصر إليها.
مصادر ومواصفات
- مواصفة CSS Multi-column Layout Module.