सीएसएस एकाधिक कॉलम
CSS मल्टी-कॉलम लेआउट
CSS मल्टी-कॉलम लेआउट टेक्स्ट के कई कॉलमों की आसान परिभाषा की अनुमति देता है - ठीक उसी तरह जैसे अखबारों में होता है:
डेली पिंग
दर्द ही तो प्यार है यही कारण है कि आने वाले समय में, परिणाम का लाभ उठाने के लिए हमारी सामान्य प्रथा कौन सहन करती है ओलंपिक में ब्यूरो में दर्द का दर्द, या ओलंपिक में ब्यूरो में दर्द, वह परिणामों के लिए एक झुंझलाहट बनना चाहता है, या वह सच में ईयू प्रतिरक्षा प्रणाली के दर्द से पीड़ित है, एरोस और उपभोक्ता, और zzril की नियमित नफरत। एक खाली समय के लिए जब हम अपने किशोरों से मुक्त हो जाते हैं तो कोई विकल्प नहीं है
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 |
सीएसएस एकाधिक कॉलम बनाएं
गुण उन column-countस्तंभों की संख्या निर्दिष्ट करता है जिनमें एक तत्व को विभाजित किया जाना चाहिए।
निम्न उदाहरण <div> तत्व में टेक्स्ट को 3 कॉलम में विभाजित करेगा:
उदाहरण
div
{
column-count: 3;
}
CSS कॉलम के बीच गैप निर्दिष्ट करें
column-gapगुण स्तंभों के बीच के अंतर को निर्दिष्ट करता है ।
निम्न उदाहरण स्तंभों के बीच 40 पिक्सेल का अंतर निर्दिष्ट करता है:
उदाहरण
div
{
column-gap: 40px;
}
सीएसएस कॉलम नियम
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लिए सुझाई गई, इष्टतम चौड़ाई निर्दिष्ट करता है।
निम्न उदाहरण निर्दिष्ट करता है कि कॉलम के लिए सुझाई गई, इष्टतम चौड़ाई 100px होनी चाहिए:
उदाहरण
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 |