सीएसएस के साथ समान ऊंचाई वाले कॉलम प्राप्त करना

वेब विकास के क्षेत्र में, दिखने में आकर्षक लेआउट की खोज अक्सर समान ऊंचाई वाले कॉलम की इच्छा को जन्म देती है ऊँचाई वाले स्तम्भ. शुद्ध सीएसएस का उपयोग करके इस प्रभाव को प्राप्त करना एक चुनौती हो सकती है, जो कई डेवलपर्स को पृष्ठभूमि छवियों जैसे समाधानों की ओर जाने के लिए प्रेरित करती है। हालाँकि, एक सरल और अधिक कुशल विधि मौजूद है। प्रभावी और क्रॉस-ब्राउज़र संगत दोनों साबित होता है। इस तकनीक में पैरेंट डिव को डिस्प्ले: टेबल प्रॉपर्टी और उसके बच्चों को डिस्प्ले: टेबल-सेल प्रॉपर्टी असाइन करना शामिल है।

Implementation

.parent { प्रदर्शन: तालिका; } ।बच्चा { प्रदर्शन: टेबल-सेल; }

इन सीएसएस नियमों को लागू करने से, पैरेंट डिव एक तालिका में तब्दील हो जाता है, जबकि इसके चाइल्ड तत्व टेबल सेल बन जाते हैं। इस प्रकार प्रत्येक कक्ष तालिका के ऊर्ध्वाधर स्थान को भरता है, जिसके परिणामस्वरूप समान ऊंचाई के कॉलम बनते हैं।

.parent {
  display: table;
}
.child {
  display: table-cell;
}

यह समाधान सभी आधुनिक ब्राउज़रों के साथ संगतता का आनंद लेता है। हालाँकि, यह ध्यान रखना महत्वपूर्ण है कि यह इंटरनेट एक्सप्लोरर 7 में काम नहीं करता है। यदि IE7 के लिए समर्थन आवश्यक है, तो अधिक व्यापक दृष्टिकोण आवश्यक हो सकता है।

निष्कर्ष

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