स्तंभों को अलग बनाने के लिए, आप प्रत्येक स्तंभ के बीच एक ऊर्ध्वाधर रेखा जोड़ सकते हैं। स्तंभ अंतराल के मध्य में रेखा बैठती है। अगर आपने कभी स्टाइल किया है 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+ है |
अपने उपसर्गों को मत भूलना!