أعمدة CSS المتعددة
تخطيط CSS متعدد الأعمدة
يتيح تخطيط CSS متعدد الأعمدة تعريفًا سهلاً لأعمدة النص المتعددة - تمامًا كما هو الحال في الصحف:
ديلي بينغ
الألم نفسه هو الحب هذا هو السبب في أنه لأدنى ما يأتي ، من تتحمل ممارستنا العادية للاستفادة من العواقب ألم الألم في المكتب في الأولمبياد ، أو الألم في المكتب في الأولمبياد ، يريد أن يكون مصدر إزعاج للعواقب ، أو يعاني من آلام جهاز المناعة في الاتحاد الأوروبي في الحقيقة ، الأيروس. والمستهلك ، والكراهية المنتظمة للززريل. لوقت الفراغ عندما نتحرر من المراهقين لدينا ليس خيارا
خصائص CSS متعددة الأعمدة
ستتعرف في هذا الفصل على الخصائص متعددة الأعمدة التالية:
column-countcolumn-gapcolumn-rule-stylecolumn-rule-widthcolumn-rule-colorcolumn-rulecolumn-spancolumn-width
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.
| Property | |||||
|---|---|---|---|---|---|
| column-count | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-gap | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule-color | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule-style | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule-width | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-span | 50.0 | 10.0 | 71.0 | 9.0 | 37.0 |
| column-width | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
إنشاء CSS أعمدة متعددة
تحدد الخاصية عدد column-countالأعمدة التي يجب تقسيم العنصر إليها.
المثال التالي سيقسم النص في عنصر <div> إلى 3 أعمدة:
مثال
div
{
column-count: 3;
}
CSS حدد الفجوة بين الأعمدة
column-gapتحدد الخاصية الفجوة بين الأعمدة .
يحدد المثال التالي فجوة 40 بكسل بين الأعمدة:
مثال
div
{
column-gap: 40px;
}
قواعد عمود CSS
تحدد الخاصية نمط column-rule-styleالقاعدة بين الأعمدة:
مثال
div
{
column-rule-style: solid;
}
تحدد الخاصية عرض column-rule-widthالقاعدة بين الأعمدة:
مثال
div
{
column-rule-width: 1px;
}
تحدد الخاصية لون column-rule-colorالقاعدة بين الأعمدة:
مثال
div
{
column-rule-color: lightblue;
}
الخاصية هي column-ruleخاصية اختصار لتعيين جميع خصائص قاعدة العمود * أعلاه.
يعيّن المثال التالي عرض القاعدة ونمطها ولونها بين الأعمدة:
مثال
div
{
column-rule: 1px solid lightblue;
}
حدد عدد الأعمدة التي يجب أن يمتد العنصر إليها
تحدد الخاصية عدد column-spanالأعمدة التي يجب أن يمتد العنصر عبرها.
يحدد المثال التالي أن العنصر <h2> يجب أن يمتد عبر جميع الأعمدة:
مثال
h2 {
column-span: all;
}
حدد عرض العمود
تحدد column-widthالخاصية عرضًا أمثل مقترحًا للأعمدة.
يوضح المثال التالي أن العرض الأمثل المقترح للأعمدة يجب أن يكون 100 بكسل:
مثال
div {
column-width: 100px;
}
خصائص CSS متعددة الأعمدة
يسرد الجدول التالي جميع خصائص الأعمدة المتعددة:
| Property | Description |
|---|---|
| column-count | Specifies the number of columns an element should be divided into |
| column-fill | Specifies how to fill columns |
| column-gap | Specifies the gap between the columns |
| column-rule | A shorthand property for setting all the column-rule-* properties |
| column-rule-color | Specifies the color of the rule between columns |
| column-rule-style | Specifies the style of the rule between columns |
| column-rule-width | Specifies the width of the rule between columns |
| column-span | Specifies how many columns an element should span across |
| column-width | Specifies a suggested, optimal width for the columns |
| columns | A shorthand property for setting column-width and column-count |