الفرق بين المراجعتين لصفحة: «CSS/column-span»
< CSS
لا ملخص تعديل |
لا ملخص تعديل |
||
سطر 36: | سطر 36: | ||
مثال عن استخدام القيمة <code>all</code> في الخاصية <code>column-span</code> على عناصر <code>[[HTML/h1-h6|<nowiki><h1></nowiki>]]</code>:<syntaxhighlight lang="html"> | مثال عن استخدام القيمة <code>all</code> في الخاصية <code>column-span</code> على عناصر <code>[[HTML/h1-h6|<nowiki><h1></nowiki>]]</code>:<syntaxhighlight lang="html"> | ||
<div class="content-box"> | <div class="content-box"> | ||
حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى. توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية. | |||
<h1 class="span"> | <h1 class="span">الترويسة</h1> | ||
حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى. توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية. | |||
</div> | |||
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | ||
.content-box { | .content-box { |
مراجعة 03:40، 6 سبتمبر 2018
الخاصية column-span
في CSS تسمح بأن يمتد أحد العناصر على جميع الأعمدة وذلك عند ضبط القيمة all
لها.
بطاقة الخاصية
القيمة الابتدائية | none
|
---|---|
تُطبَّق على | العناصر الكتلية. |
قابلة للوراثة | لا |
قابلة للتحريك | لا |
القيمة المحسوبة | كما حُدِّدَت. |
/* كلمات محجوزة */
column-span: none;
column-span: all;
/* القيم العامة */
column-span: inherit;
column-span: initial;
column-span: unset;
أمثلة
مثال عن استخدام القيمة all
في الخاصية column-span
على عناصر <h1>
:
<div class="content-box">
حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى. توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية.
<h1 class="span">الترويسة</h1>
حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى. توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية.
</div>
شيفرة CSS:
.content-box {
margin: 1em;
padding: 1em;
width: 400px;
border: 1px solid #eaecf0;
background-color: #f8f9fa;
column-count: 3;
}
.span {column-span: all; text-align: center;}
دعم المتصفحات
الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
الدعم الأساسي | 4.0 (مع السابقة -webkit- )
50 (دون سابقة) |
غير مدعومة | 10 | 15 (مع السابقة -webkit- )
37 (دون سابقة) |
3.1 (مع السابقة -webkit- )
10 (دون سابقة) |
البنية العامة
تقبل الخاصية column-span
قيمةً من القيمتين التاليتين.
none
لن يمتد العنصر على أكثر من عمود.
all
سيمتد العنصر على جميع الأعمدة، ولا يُسمَح باستخدام هذه الخاصية إلا على العناصر الكتلية التي لها القيمة block
للخاصية display
، وهي تفيد إذا أردنا أن تمتد صورة أو عنوان على جميع الأعمدة.
البنية الرسمية
column-span: none | all;
مصادر ومواصفات
- مواصفة CSS Multi-column Layout Module.