CSS کی کالن

CSS 多列布局

CSS 多列布局允许我们轻松定义多列文本 - 就像报纸那样：

三国演义

第一回
宴桃园豪杰三结义
斩黄巾英雄首立功
话说天下大势，分久必合，合久必分：周末七国分争，并入于秦；及秦灭之后，楚、汉分争，又并入于汉；汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃，共相辅佐；时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起，只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十馀丈，飞入温德殿中。秋七月，有虹现于玉堂，五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。

...... ......

ویژگی‌های چند ستونی CSS

...... ......

  • column-count
  • column-gap
  • column-rule-style
  • column-rule-width
  • column-rule-color
  • column-rule
  • column-span
  • column-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-width: 1px;

مثال

div {
  ویژگی عرض خط بین ستون‌ها را تعیین می‌کند:
}

آزمایش کنید

column-rule-color column-rule-color: lightblue;

مثال

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 کیلئے شروتی کا استعمال