कॉलम-गिनती - सीएसएस-ट्रिक्स

Anonim

यदि आपको बहु-स्तंभ लेआउट को डिज़ाइन करते समय स्तंभों की सटीक संख्या की आवश्यकता होती है, तो उपयोग करें column-count

.lead ( column-count: 3; )

स्तंभों की संख्या को देखते हुए, ब्राउज़र समान रूप से उस संख्या के कॉलम में सामग्री वितरित करेगा।

इस संपत्ति का उपयोग शॉर्टहैंड में भी किया columnsजा सकता है और इसके साथ मिलावट में इस्तेमाल किया जा सकता है column-width। जब दोनों संपत्तियों को घोषित किया column-countजाता है तो अधिकतम संख्या में कॉलम होते हैं।

मूल्यों

column-countautoया पूर्णांक हो सकता है ।

का प्रयोग करें autoअगर आप भी उपयोग कर रहे हैं column-width। इसे ब्राउज़र को बताने का एक तरीका के रूप में सोचो, चलो column-widthनेतृत्व करने के लिए।

पूर्णांक, जिसे स्तंभों की संख्या के रूप में भी जाना जाता है, को 0 से अधिक या उसके बराबर होना चाहिए।

column-widthइस संपत्ति के विपरीत ब्राउज़र की चौड़ाई की परवाह किए बिना स्तंभों की संख्या धारण करेगा। इसका मतलब यह है कि यदि आपने अपने मोबाइल फोन पर 5-कॉलम वाला लेआउट बनाया है, तो आपके पास नेविगेट करने के लिए बहुत ही परिष्कृत 5-कॉलम वाला लेआउट होगा। column-countसबसे अच्छा साथ काम करता है column-width

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

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

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

यदि आप एक ऐसे उपकरण का उपयोग नहीं कर रहे हैं जो पहले से ही मदद करता है।