स्तंभ-नियम - सीएसएस-ट्रिक्स

विषय - सूची

स्तंभों को अलग बनाने के लिए, आप प्रत्येक स्तंभ के बीच एक ऊर्ध्वाधर रेखा जोड़ सकते हैं। स्तंभ अंतराल के मध्य में रेखा बैठती है। अगर आपने कभी स्टाइल किया है border, तो आप स्टाइल के लिए तैयार हैं column-rule

.container ( -webkit-columns: 2 400px; -moz-columns: 2 400px; columns: 2 400px; -webkit-column-rule: 1px solid black; -moz-column-rule: 1px solid black; column-rule: 1px solid black; )

संपत्ति के लिए शॉर्टहैंड है column-rule-width, column-rule-styleऔर column-rule-color, जो समान पैटर्न है borderऔर समान मूल्यों को स्वीकार करता है।

-webkit-column-rule-width: 1px; -moz-column-rule-width: 1px; column-rule-width: 1px; -webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: solid; -webkit-column-rule-color: black; -moz-column-rule-color: black; column-rule-color: black;

column-rule-widthकी तरह एक लंबाई 3pxया एक कीवर्ड मान हो सकता है thin

column-rule-styleकोई भी हो सकता border-styleहै जैसे मूल्यों solid, dotted, और dashed

column-rule-color किसी भी रंग मूल्य हो सकता है।

इसके विपरीत column-gap, column-ruleस्थान नहीं लेता है। यदि column-rule-widthमोटा है column-gapतो शासन स्तंभों के नीचे विस्तारित होगा।


ऊर्ध्वाधर नियम केवल उन स्तंभों के बीच मौजूद होंगे जिनमें सामग्री है।

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

बहु-स्तंभ लेआउट समर्थन:

क्रोम सफारी फ़ायर्फ़ॉक्स ओपेरा अर्थात एंड्रॉयड आईओएस
कोई 3+ 1.5+ है 11.1+ 10+ 2.3+ 6.1+ है

अपने उपसर्गों को मत भूलना!

दिलचस्प लेख...