الفرق بين المراجعتين لصفحة: «CSS/column-span»
< CSS
لا ملخص تعديل |
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
||
| سطر 80: | سطر 80: | ||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مواصفة [https://drafts.csswg.org/css-multicol-1/#column-gap CSS Multi-column Layout Module]. | * مواصفة [https://drafts.csswg.org/css-multicol-1/#column-gap CSS Multi-column Layout Module]. | ||
[[تصنيف:CSS]] | [[تصنيف:CSS|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Property]] | [[تصنيف:CSS Property|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Columns]] | [[تصنيف:CSS Columns|{{SUBPAGENAME}}]] | ||
مراجعة 15:34، 28 يناير 2018
الخاصية column-span في CSS تسمح بأن يمتد أحد العناصر على جميع الأعمدة وذلك عند ضبط القيمة all لها.
/* كلمات محجوزة */
column-span: none;
column-span: all;
/* القيم العامة */
column-span: inherit;
column-span: initial;
column-span: unset;
| القيمة الابتدائية | none
|
|---|---|
| تُطبَّق على | العناصر الكتلية. |
| قابلة للوراثة | لا |
| قابلة للتحريك | لا |
| القيمة المحسوبة | كما حُدِّدَت. |
أمثلة
مثال عن استخدام القيمة all في الخاصية column-span على عناصر <h1>:
<div class="content-box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<h1 class="span">Heading</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</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.