CSS कॉलम-चौड़ाई संपत्ति
उदाहरण
निर्दिष्ट करें कि कॉलम की चौड़ाई 100px होनी चाहिए:
div
{
column-width: 100px;
}
नीचे और अधिक "इसे स्वयं आज़माएं" उदाहरण।
परिभाषा और उपयोग
गुण कॉलम की column-width
चौड़ाई निर्दिष्ट करता है।
कॉलम की संख्या सभी सामग्री को पूरे तत्व में दिखाने के लिए आवश्यक स्तंभों की न्यूनतम संख्या होगी।
column-width
एक लचीली संपत्ति है। ब्राउज़र के लिए न्यूनतम चौड़ाई के सुझावcolumn-width
के रूप में सोचें
। एक बार जब ब्राउज़र आपकी निर्दिष्ट चौड़ाई में कम से कम दो कॉलम फिट नहीं कर पाता है तो कॉलम रुक जाएंगे और एक कॉलम में गिर जाएंगे।
डिफ़ॉल्ट मान: | ऑटो |
---|---|
विरासत में मिला: | नहीं |
एनिमेटेबल: | हां। एनिमेटेबल के बारे में पढ़ें |
संस्करण: | CSS3 |
जावास्क्रिप्ट सिंटैक्स: | ऑब्जेक्ट .style.columnWidth="100px" |
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से संपत्ति का समर्थन करता है।
-वेबकिट- या -मोज़ के बाद की संख्याएं- पहले संस्करण को निर्दिष्ट करें जो उपसर्ग के साथ काम करता है।
Property | |||||
---|---|---|---|---|---|
column-width | 50.0 4.0 -webkit- |
10.0 | 52.0 2.0 -moz- |
9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
सीएसएस सिंटेक्स
column-width: auto|length|initial|inherit;
सम्पत्ति की कीमत
Value | Description | Play it |
---|---|---|
auto | Default value. The column width will be determined by the browser | |
length | A length that specifies the width of the columns. The number of columns will be the minimum number of columns needed to show all the content across the element. Read about length units | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
और ज्यादा उदाहरण
उदाहरण
टेक्स्ट को <div> तत्व में तीन कॉलम में विभाजित करें:
div
{
column-count: 3;
}
उदाहरण
स्तंभों के बीच 40 पिक्सेल का अंतर निर्दिष्ट करें:
div
{
column-gap: 40px;
}
उदाहरण
स्तंभों के बीच नियम की चौड़ाई, शैली और रंग निर्दिष्ट करें:
div
{
column-rule: 4px double #ff00ff;
}
संबंधित पृष्ठ
सीएसएस ट्यूटोरियल: सीएसएस मल्टीपल कॉलम्स
एचटीएमएल डोम संदर्भ: कॉलमविड्थ संपत्ति