الفرق بين المراجعتين لصفحة: «CSS/column-count»

المراجعة الحالية بتاريخ 04:59، 12 سبتمبر 2018

الخاصية 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.

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:الخاصية <code>column-count</code>}}</noinclude>
-الخاصية <code>column-count</code> في CSS هي تُحدِّد ما هو عدد الأعمدة التي سينقسم العنصر إليها.<nowiki/><syntaxhighlight lang="css">
+الخاصية <code>column-count</code> في CSS هي تُحدِّد ما هو عدد الأعمدة التي سينقسم العنصر إليها.
-/* <integer> قيمة عددية */
-column-count: 3;
-/* كلمة محجوزة */
-column-count: auto;
-/* القيم العامة */
+== بطاقة الخاصية ==
-column-count: inherit;
-column-count: initial;
-column-count: unset;
-</syntaxhighlight>
 {| class="wikitable" style="width: 100%;"
 |-
@@ سطر 30: / سطر 21: @@
 |}
+<syntaxhighlight lang="css">
+/* <integer> قيمة عددية */
+column-count: 3;
+/* كلمة محجوزة */
+column-count: auto;
+/* القيم العامة */
+column-count: inherit;
+column-count: initial;
+column-count: unset;
+</syntaxhighlight>
 == أمثلة ==
@@ سطر 84: / سطر 88: @@
 == البنية العامة ==
 تقبل الخاصية <code>column-count</code> قيمةً واحدةً أو قيمتين.
-=== القيمة <code>auto</code> ===
+===  <code>auto</code> ===
 تُشير هذه الكلمة المحجوزة إلى أنَّ عدد الأعمدة سيُحدَّد عبر خاصيات CSS الأخرى مثل <code>[[CSS/column-width|column-width]]</code>.
-=== القيمة <code>[[CSS/integer|<integer>]]</code> ===
+=== <code>[[CSS/integer|<integer>]]</code> ===
-عدد صحيح موجب <code>[[CSS/integer|<integer>]]</code> يُحدِّد العدد المثالي للأعمدة التي يجب تقسيم المحتوى إليها، وإذا ضٌبِطَت قيمة الخاصية <code>[[CSS/column-width|column-width]]</code> إلى قيمة لا تساوي <code>auto</code>، فستُشير هذه القيمة إلى العدد الأقصى من الأعمدة المسموحة.
+عدد صحيح موجب <code>[[CSS/integer|<integer>]]</code> يُحدِّد العدد المثالي للأعمدة التي يجب تقسيم المحتوى إليها، وإذا ضٌبِطَت  الخاصية <code>[[CSS/column-width|column-width]]</code> إلى قيمة لا تساوي <code>auto</code>، فستُشير هذه القيمة إلى العدد الأقصى من الأعمدة المسموحة.
 === البنية الرسمية ===
 <syntaxhighlight lang="css">
@@ سطر 93: / سطر 97: @@
 </syntaxhighlight>
+== انظر أيضًا ==
+* صفحة الخاصية  <code>[[CSS/column-fill|column-fill]]</code> التي تُحدِّد كيف يجب تقسيم المحتوى على الأعمدة.
+* صفحة الخاصية  <code>[[CSS/column-gap|column-gap]]</code> التي تضبط حجم الفراغ بين الأعمدة في العناصر متعددة الأعمدة.
+* صفحة الخاصية  <code>[[CSS/column-rule|column-rule]]</code> التي تُحدِّد شكل الخط العمودي (rule) الذي سيُرسَم بين الأعمدة في العناصر متعددة الأعمدة، والخاصيات الفرعية لهذه الخاصية وهي <code>[[CSS/column-rule-color|column-rule-color]]</code> و <code>[[CSS/column-rule-style|column-rule-style]]</code> و <code>[[CSS/column-rule-width|column-rule-width]]</code>.
+* صفحة الخاصية  <code>[[CSS/column-span|column-span]]</code>التي سمح بأن يمتد أحد العناصر على جميع الأعمدة وذلك عند ضبط القيمة <code>all</code> لها.
+* صفحة الخاصية  <code>[[CSS/column-width|column-width]]</code> التي تُحدِّد ما هو العرض الأدنى للأعمدة التي سينقسم العنصر إليها.
 == مصادر ومواصفات ==
 * مواصفة [https://drafts.csswg.org/css-multicol-1/#column-count CSS Multi-column Layout Module].