CSS3 متعدد العمود تخطيط
تخطيط CSS3 بأعمدة يسمح تعريف سهل من أعمدة متعددة من النص - مثلما هو الحال في الصحف:
يوميا Ping
Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta
nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل العقار.
أرقام تليها -webkit- أو -moz- تحدد النسخة الأولى التي عملت مع بادئة.
| الملكية | |||||
|---|---|---|---|---|---|
| column-count | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| column-gap | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| column-rule | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| column-rule-color | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| column-rule-style | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| column-rule-width | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| column-width | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
خصائص CSS3 متعدد العمود
في هذا الفصل سوف تتعلم عن الخصائص التالية بأعمدة:
-
column-count -
column-gap -
column-rule-style -
column-rule-width -
column-rule-color -
column-rule -
column-span -
column-width
CSS3 إنشاء أعمدة متعددة
في column-count تحدد الخاصية عدد الأعمدة يجب تقسيم عنصر في.
والمثال التالي تقسيم النص في <div> العنصر في 3 أعمدة:
مثال
div
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
انها محاولة لنفسك » CSS3 تحديد الفجوة بين أعمدة
في column-gap تحدد الخاصية الفجوة بين الأعمدة.
يحدد المثال التالي فجوة 40 بكسل بين الأعمدة:
مثال
div
{
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
انها محاولة لنفسك » قواعد العمود CSS3
و column-rule-style تحدد الخاصية نمط من الحكم بين الأعمدة:
مثال
div
{
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
}
انها محاولة لنفسك » و column-rule-width تحدد الخاصية عرض حكم بين الأعمدة:
مثال
div
{
-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 1px; /* Firefox */
column-rule-width: 1px;
}
انها محاولة لنفسك » في column-rule-color تحدد الخاصية لون سيادة بين الأعمدة:
مثال
div
{
-webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
-moz-column-rule-color: lightblue; /* Firefox */
column-rule-color: lightblue;
}
انها محاولة لنفسك » في column-rule الخاصية هي خاصية الاختزال لوضع كافة الخصائص * عمود rule- أعلاه.
يقوم المثال التالي عرض، والأسلوب، ولون من حكم بين الأعمدة:
مثال
div
{
-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid lightblue; /* Firefox */
column-rule: 1px solid lightblue;
}
انها محاولة لنفسك » تحديد عدد الأعمدة والعنصر كان ينبغي سبان
في column-span تحدد الخاصية عدد الأعمدة عنصر يجب أن تمتد عبر.
يحدد المثال التالي أن <h2> العنصر يجب أن تمتد عبر كافة الأعمدة:
مثال
h2 {
-webkit-column-span: all; /* Chrome, Safari, Opera */
column-span: all;
}
انها محاولة لنفسك » تحديد عرض العمود
في column-width تحدد الخاصية على المقترح، عرض الأمثل للأعمدة.
يحدد المثال التالي أن اقترح، عرض الأمثل للأعمدة وينبغي أن يكون 100px:
مثال
div {
-webkit-column-width: 100px; /* Chrome, Safari, Opera */
column-width: 100px;
}
انها محاولة لنفسك » خصائص CSS3 متعدد الأعمدة
يسرد الجدول التالي كافة الخصائص أعمدة متعددة:
| الملكية | وصف |
|---|---|
| column-count | يحدد عدد الأعمدة يجب تقسيم عنصر في |
| column-fill | يحدد كيفية تعبئة الأعمدة |
| column-gap | تحديد الفجوة بين الأعمدة |
| column-rule | خاصية الاختزال لوضع كافة الخصائص * عمود rule- |
| column-rule-color | يحدد لون سيادة بين الأعمدة |
| column-rule-style | يحدد أسلوب الحكم بين الأعمدة |
| column-rule-width | يحدد عرض حكم بين الأعمدة |
| column-span | يحدد عدد الأعمدة عنصر يجب أن تمتد عبر |
| column-width | يحدد المقترح، عرض الأمثل للأعمدة |
| columns | خاصية الاختزال لوضع العمود العرض والعمود العد |