CSS متعدد ستون
- پچھلے صفحہ CSS صفحات تقسیم
- آئندہ صفحہ CSS استعمال کاربر
CSS 多列布局
CSS 多列布局允许我们轻松定义多列文本 - 就像报纸那样：
三国演义
第一回
宴桃园豪杰三结义
斩黄巾英雄首立功
话说天下大势，分久必合，合久必分：周末七国分争，并入于秦；及秦灭之后，楚、汉分争，又并入于汉；汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃，共相辅佐；时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起，只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十馀丈，飞入温德殿中。秋七月，有虹现于玉堂，五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。
...... ......
ویژگیهای چند ستونی CSS
...... ......
column-countcolumn-gapcolumn-rule-stylecolumn-rule-widthcolumn-rule-colorcolumn-rulecolumn-spancolumn-width
در این فصل، شما یاد خواهید گرفت که از چه ویژگیهای چند ستونی استفاده کنید:
پشتیبانی مرورگر
| ویژگی | اعداد در جدول نشاندهنده نسخه اولین مرورگر هستند که از این ویژگی پشتیبانی میکند. | Chrome | IE | Firefox | Safari |
|---|---|---|---|---|---|
| column-count | 71.0 | 50.0 | 10.0 | 52.0 | 9.0 |
| column-gap | 71.0 | 50.0 | 10.0 | 52.0 | 9.0 |
| column-rule | 71.0 | 50.0 | 10.0 | 52.0 | 9.0 |
| column-rule-color | 71.0 | 50.0 | 10.0 | 52.0 | 9.0 |
| column-rule-style | 71.0 | 50.0 | 10.0 | 52.0 | 9.0 |
| column-rule-width | 71.0 | 50.0 | 10.0 | 52.0 | 9.0 |
| column-span | 71.0 | 50.0 | Opera | 52.0 | 9.0 |
| column-width | 71.0 | 50.0 | 10.0 | 52.0 | 9.0 |
37.0
column-count CSS ایجاد چند ستون
ویژگی مقادیر تعداد ستونهایی که عنصر باید تقسیم شود را مشخص میکند.
مثال
div {
در مثال زیر مقدار تعداد ستونهایی که متن در div قرار دارد به 3 تقسیم شده است:
}
column-count: 3;
column-gap CSS فاصله بین ستونها مشخص میکند
ویژگی مقادیر فاصله بین ستونها را مشخص میکند.
مثال
div {
در مثال زیر مقدار فاصله بین ستونها به میکرون 40 تعیین شده است:
}
column-gap: 40px;
column-rule-style CSS قوانین ستون
مثال
div {
ویژگی استایل بین ستونها را مشخص میکند:
}
column-rule-width column-rule-style: solid;
مثال
div {
ویژگی مقادیر عرض بین ستونها را مشخص میکند:
}
column-rule-color column-rule-width: 1px;
مثال
div {
ویژگی مقادیر رنگ بین ستونها را مشخص میکند:
}
ویژگی column-rule یک مقادیر کوتاه برای تنظیم تمامی مقادیر column-rule-* است.
در مثال زیر مقادیر عرض، استایل و رنگ بین ستونها تنظیم شده است:
مثال
div {
column-rule: 1px solid lightblue;
}
تعیین تعداد ستونهایی که عنصر باید عبور کند
column-span ویژگی مشخص میکند که عنصر باید در چند ستون عبور کند.
در مثال زیر مشخص شده است که عنصر <h2> باید در تمامی ستونها عبور کند:
مثال
h2 {
column-span: all;
}
تعیین عرض ستون
column-width ویژگی مقادیر پیشنهادی بهترین عرض ستونها را برای ستونها مشخص میکند.
در مثال زیر مقادیر پیشنهادی بهترین عرض ستونها به میکرون 100px تعیین شده است:
مثال
div {
column-width: 100px;
}
ویژگیهای چند ستونی CSS
در جدول زیر تمامی ویژگیهای چند ستونی لیست شدهاند:
| ویژگی | توضیح |
|---|---|
| column-count | مقدار تعداد ستونهایی که عنصر باید تقسیم شود را تعیین کنید. |
| column-fill | تعیین کنید که چگونه ستونها پر شوند. |
| column-gap | مقدار فاصله بین ستونها را مشخص کنید. |
| column-rule | برای تنظیم تمامی مقادیر column-rule-* از مقادیر کوتاه استفاده کنید. |
| column-rule-color | مقادیر رنگ بین ستونها را تعیین کنید. |
| column-rule-style | مقادیر استایل بین ستونها را تعیین کنید. |
| column-rule-width | مقادیر عرض بین ستونها را تعیین کنید. |
| column-span | ایک عنصر کو کتنی ستون کیلئے منتقل کرنا ہوگا، طے کریں |
| column-width | ستون کیلئے سفارش شدہ اپنی بہترین چوڑائی نامزد کریں |
| کولمز | column-width اور column-count کیلئے مختصر نمائش استعمال کریں |
- پچھلے صفحہ CSS صفحات تقسیم
- آئندہ صفحہ CSS استعمال کاربر
