CSS मल्टी कॉलमन

CSS 多列布局

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

三国演义

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

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

CSS बहु-कोलम गुण

इस चैप्टर में आपको नीचे दिए गए बहु-कोलम गुणों को सीखना होगा:

  • column-count
  • column-gap
  • column-rule-style
  • column-rule-width
  • column-rule-color
  • column-rule
  • column-span
  • column-width

ब्राउज़र समर्थन

तालिका में दिए गए नंबर इस गुण को पूरी तरह से समर्थन करने वाले पहले ब्राउज़र का संस्करण को सूचीबद्ध करते हैं。

गुण च्रोम आईई फायरफॉक्स सफारी ओपेरा
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 गुण ऊपर की सभी 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 स्तम्भ के लिए सिफारिशित बेहतरीन चौड़ाई निर्दिष्ट करें
columns column-width और column-count के लिए सहज विन्यास अट्रिब्यूट