सीएसएस मल्टी-कॉलम विवरण

अपने विषय को जारी रखना CSS3 में नया: मल्टी-कॉलम, फ्लेक्सबॉक्स, ग्रिड लेआउट, मेरा सुझाव है कि आप सरल और स्पष्ट उदाहरणों के साथ मल्टी- कॉलम संपत्ति में गहन विसर्जन के साथ लेख का अनुवाद करें।



समाचार पत्रों और पत्रिकाओं द्वारा यह साबित किया गया है कि कई स्तंभों में विभाजित पाठ को बहुत आसान माना जाता है। कुछ समय पहले तक, वेब पेजों पर इस तरह से सामग्री प्रदर्शित करना एक समस्या थी; यह उस बिंदु तक पहुँच गया जहाँ लेआउट डिज़ाइनर ने टेक्स्ट को अन्य डिवाइड में विभाजित कर दिया। लेकिन CSS3 मल्टी कॉलम मॉड्यूल के साथ चीजें बहुत आसान हो सकती हैं।

आधिकारिक विनिर्देश , ब्राउज़र समर्थन ।

बहु-स्तंभ सामग्री बनाएँ

HTML5 लेख टैग का उपयोग करें:

<article> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et, rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor. Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit amet tincidunt orci placerat in. Integer vitae consequat augue. // .. </article> 

हम टेक्स्ट को दो कॉलम में तोड़ते हैं:

 article { -webkit-column-count:2; -moz-column-count:2; column-count:2; } 

कॉलम-चौड़ाई गुण का उपयोग करके, आप आवश्यक चौड़ाई के लिए कॉलम सेट कर सकते हैं:

 article { -moz-column-width: 150px; -webkit-column-width: 150px; column-width: 150px; } 

कॉलम रिक्ति

अंतराल को px या em में कॉलम-गैप प्रॉपर्टी द्वारा सेट किया गया है, और नकारात्मक नहीं हो सकता है:

 article { -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; } 

स्तंभ विभाजक

कॉलम-नियम की संपत्ति आपको कॉलम के बीच एक विभाजक जोड़ने की अनुमति देती है, ऑपरेशन का सिद्धांत सीमा के समान है।

 article { -moz-column-rule: 1px dotted #ccc; -webkit-column-rule: 1px dotted #ccc; column-rule: 1px dotted #ccc; } 

कॉलम एसोसिएशन

कॉलम-स्पैन प्रॉपर्टी वांछित स्तंभों को मिलाकर टेबल में कोलस्पैन के समान काम करती है।

 article h1 { -webkit-column-span: all; column-span:all; } 

सभी उदाहरणों का डेमो

+ स्रोत

परिणाम

CSS3 मल्टी कॉलम मॉड्यूल के लिए धन्यवाद, आप बहुत आसानी से और जल्दी से ग्रंथों को मानव-पठनीय कॉलम में विभाजित कर सकते हैं। समर्थित प्रोजेक्ट्स पर बहु-स्तंभों पर प्रयास करने के लिए समर्थित ब्राउज़रों की सूची पहले से ही पर्याप्त है। विरासत ब्राउज़रों के लिए, आप एक विशेष जावास्क्रिप्ट पुस्तकालय का उपयोग कर सकते हैं।