CSS3 के साथ एकाधिक कॉलम लेआउट (पत्रिका-समान)
सामान्य तौर पर, लोग बहुत लंबी सामग्री को पढ़ते समय ट्रैक खो देंगे। यही कारण है कि, प्रिंट मीडिया जैसे पत्रिकाओं और समाचार पत्रों में, सामग्री को आसानी से पढ़ने के लिए कई कॉलमों में विभाजित किया जाता है.
वेब पर एक कॉलम बनाना एक पूरी तरह से अलग कहानी है। यह काफी मुश्किल है। वास्तव में, बहुत पहले नहीं आपको सामग्री को कुछ में मैन्युअल रूप से विभाजित करने की आवश्यकता हो सकती है divs और इसे दाईं या बाईं ओर फ्लोट करें, फिर चौड़ाई, पैडिंग, मार्जिन, बॉर्डर इत्यादि निर्दिष्ट करें.
लेकिन, अब चीजें बहुत सरल हो गई हैं CSS3 मल्टी कॉलम मॉड्यूल. जैसा कि नाम से स्पष्ट है, यह मॉड्यूल हमें अखबारों या पत्रिकाओं में दिखाई देने वाले स्तंभित लेआउट में सामग्री को विभाजित करने की अनुमति देता है.
ब्राउज़र का समर्थन
वर्तमान में सभी ब्राउज़रों में एकाधिक स्तंभों का समर्थन किया जाता है - फ़ायरफ़ॉक्स 2+, क्रोम 4+, सफारी 3.1+ और ओपेरा 11.1 - इसके अलावा, जैसा कि पूर्वानुमान है, इंटरनेट एक्सप्लोरर, लेकिन अगले संस्करण, IE10, लगता है कि इस मॉड्यूल के लिए समर्थन प्रदान करना शुरू कर दिया है.
बाकी ब्राउज़रों के लिए, इसे काम करने के लिए, फ़ायरफ़ॉक्स को अभी भी ज़रूरत है -moz- उपसर्ग, जबकि क्रोम और सफारी की जरूरत है -वेबकिट- उपसर्ग। ओपेरा को किसी भी उपसर्ग की आवश्यकता नहीं है, इसलिए हम केवल आधिकारिक गुणों का उपयोग कर सकते हैं.
स्रोत: जब मैं CSS3 के कई कॉलम लेआउट का उपयोग कर सकता हूं?
मल्टीपल कॉलम बनाएं
कॉलम बनाने से पहले, हमने HTML5 के अंदर लिपटे प्रदर्शन के लिए कुछ टेक्स्ट पैराग्राफ तैयार किए हैं टैग, अनुसरण के रूप में;
लोरम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिंग एलीट। Nunc libero magna, venenatis quis aliquet et, rutrum in augue। दोनेक वेल अस्थायी डोलर। डोनेक वुल्फपत फ्रिंजिला पोर्टा। सस्पेंडेड नॉन नुल्ला टॉर्चर। क्विसक केदो ओरनारे मील, अमेट अलिकेट जस्टो बाइबेंडम नॉन। इंटेगर बाइबेंडम काफलीस सैपियन, इनसेट में टिसिनडंट ओरसी प्लेजरैट और इंटेगर विटे परिणाम एग्यू। //और इसी तरह
... और के लिए चौड़ाई निर्दिष्ट करें 600px स्टाइल शीट से, यह बात है.
अब, कॉलम बनाना शुरू करते हैं.
नीचे दिए गए उदाहरण में, हम सामग्री को में विभाजित करेंगे दो कॉलम उसके साथ स्तंभ गिनती संपत्ति। यह संपत्ति ब्राउज़र को निर्दिष्ट संख्या द्वारा कॉलम में सामग्री को प्रस्तुत करने के लिए बताएगी और ब्राउज़र को प्रत्येक कॉलम के लिए उचित चौड़ाई तय करने देगा.
लेख -वेबकिट-कॉलम-गणना: 2; -moz-स्तंभ गिनती: 2; स्तंभ गिनती: 2;
गणना द्वारा परिभाषित किए जाने के अलावा, कॉलम का उपयोग करके चौड़ाई निर्दिष्ट करके बनाया जा सकता है स्तंभ की चौड़ाई संपत्ति और ब्राउज़र को यह तय करने के लिए छोड़कर कि कितने कॉलम उत्पन्न होने चाहिए.
इस उदाहरण में, हम कॉलम की चौड़ाई निर्दिष्ट करते हैं 150px, जिसके परिणामस्वरूप सामग्री को तीन स्तंभों में विभाजित किया गया.
लेख -मोज़-कॉलम-चौड़ाई: 150px; -webkit- स्तंभ-चौड़ाई: 150px; स्तंभ-चौड़ाई: 150px;
जैसा कि युक्ति में कहा गया है। उपलब्ध स्थान के आधार पर कॉलम की वास्तविक चौड़ाई निर्दिष्ट कॉलम चौड़ाई की तुलना में व्यापक या संकीर्ण हो सकती है। इसके अलावा, यदि चौड़ाई मान स्पष्ट रूप से निर्दिष्ट नहीं है, तो “ऑटो” डिफ़ॉल्ट के रूप में लिया जाएगा, जिसका अर्थ यह भी हो सकता है “कोई कॉलम नहीं”.
कॉलम गैप
कॉलम गैप प्रत्येक स्तंभ को अलग करने वाले रिक्त स्थान को परिभाषित करें। में अंतर मान को बताया जा सकता है एम या पिक्सल, लेकिन जैसा कि कल्पना में कहा गया है मान ऋणात्मक नहीं हो सकता. नीचे दिए गए उदाहरण में हम अंतर को निर्दिष्ट करते हैं 30px, इसलिए स्तंभों के बीच का स्थान थोड़ा चौड़ा दिखता है.
लेख -वेबकिट-कॉलम-गैप: 30 पीएक्स; -मोज़-कॉलम-गैप: 30 पीएक्स; कॉलम-गैप: 30 पीएक्स;
स्तंभ नियम
क्या आप स्तंभ के बीच की सीमाएँ जोड़ना चाहते हैं, आप इसका उपयोग कर सकते हैं स्तंभ-शासन संपत्ति, जो बहुत समान है सीमा संपत्ति। तो, मान लीजिए, यदि हम कॉलम के बीच एक बिंदीदार बॉर्डर लगाना चाहते हैं, तो हम लिख सकते हैं;
लेख -मोज़-कॉलम-नियम: 1px बिंदीदार #ccc; -webkit- कॉलम-नियम: 1px बिंदीदार #ccc; कॉलम-नियम: 1px बिंदीदार #ccc;
कॉलम स्पैन
यह संपत्ति काफी हद तक समान है कॉल्सपन में तालिका टैग। इस संपत्ति का सामान्य कार्यान्वयन सामग्री के शीर्षक को सभी स्तंभों में फैलाना है। यहाँ एक उदाहरण है.
लेख h1 -webkit-column-span: all; स्तंभ अवधि: सभी;
ऊपर के उदाहरण में हमने परिभाषित किया है h1 सभी स्तंभों पर स्पैन करें, और यदि कॉलम स्पैन निर्दिष्ट किया गया है, 1 डिफ़ॉल्ट के रूप में लिया जाएगा। दुर्भाग्य से यह संपत्ति, इस लेखन के समय, केवल ओपेरा और क्रोम में काम करती है.
अंतिम शब्द
अभी के लिए यही है, हम CSS3 के साथ कई कॉलम बनाने के लिए सभी आवश्यक सामानों के माध्यम से आए हैं, और जैसा कि हमने शुरुआत में उल्लेख किया है, यह मॉड्यूल आधुनिक ब्राउज़रों में बहुत अच्छी तरह से काम करता है, लेकिन यह इंटरनेट एक्सप्लोरर में अभी तक काम नहीं करता है.
अंत में, हम आशा करते हैं कि अब आपको CSS3 के साथ कॉलम बनाने के बारे में अच्छी समझ है, और यदि आपके पास प्रयोगों के लिए समय है, तो नीचे दिए गए टिप्पणी बॉक्स में अपने तरीकों और परिणामों को साझा करने के लिए स्वतंत्र महसूस करें। इस पोस्ट को पढ़ने और मज़े करने के लिए धन्यवाद.
- डेमो
- स्रोत डाउनलोड करें
