कैसे बनाएं: समान ऊंचाई वाले स्तम्भ

CSS का उपयोग करके समान ऊंचाई वाले स्तम्भ कैसे बनाएं सीखें。

समान ऊंचाई वाले स्तम्भ कैसे बनाएं

जब आपके स्तम्भों को साथ साथ दिखाना होता है, तो आपको अक्सर इस तरह की ऊंचाई के साथ समान ऊंचाई वाले स्तम्भ होना चाहिए (उच्चतम ऊंचाई के साथ)।

आप खुद से प्रयोग करें

पहला कदम - HTML जोड़ें:

<div class="col-container">
  <div class="col">
    <h2>स्तम्भ 1</h2>
    <p>हेलो वर्ल्ड</p>
  </div>
  <div class="col">
    <h2>स्तम्भ 2</h2>
    <p>हेलो वर्ल्ड!</p>
    <p>हेलो वर्ल्ड!</p>
    <p>हेलो वर्ल्ड!</p>
    <p>हेलो वर्ल्ड!</p>
  </div>
  <div class="col">
    <h2>स्तम्भ 3</h2>
    <p>कुछ अन्य टेक्स्ट..</p>
    <p>कुछ अन्य टेक्स्ट..</p>
  </div>
</div>

दूसरा कदम - CSS जोड़ें:

.col-container {
  डिस्प्ले: टेबल; /* इसके एलीमेंट को टेबल की तरह प्रदर्शित करें */
  विस्तार: 100%; /* पूरे पृष्ठ को विस्तार करने के लिए फुल चौड़ाई निर्धारित करें */
}
.col {
  डिस्प्ले: टेबल-सेल; /* इसके भीतर के एलीमेंट को टेबल-सेल की तरह प्रदर्शित करें */
}

आप खुद से प्रयोग करें

रिस्पांसिव एक-ऊंचाई

हमने पिछले उदाहरण में बनाए गए स्तम्भ रिस्पांसिव हैं (यदि आप ब्राउज़र विंडो के आकार को समायोजित करते हैं, तो आप देखेंगे कि वे स्वचालित रूप से आवश्यक चौड़ाई और ऊंचाई के अनुसार समायोजित होते हैं)। लेकिन, छोटे स्क्रीन (जैसे मोबाइल फोन) के लिए, आप इन्हें ऊर्ध्व रूप से स्टैक करना चाहते हैं न कि स्तरीय रूप से पैरलेल:

इसे हासिल करने के लिए, एक मीडिया क्वेरी जोड़ें और इसके लिए एक ब्रेकप्ट पिक्सल वाला मूल्य निर्दिष्ट करें:

उदाहरण

/* यदि ब्राउज़र विंडो 600पिक्सल से कम है, तो स्तम्भों को स्टैक करें */
@media only screen and (max-width: 600px) {
  .col {
    डिस्प्ले: ब्लॉक;
    विस्तार: 100%;
  }
}

आप खुद से प्रयोग करें

Flexbox का उपयोग करके समान ऊंचाई और चौड़ाई अर्जित करें

आप फ्लेक्सबॉक्स का उपयोग करके समान ऊंचाई वाले बॉक्स बना सकते हैं:

उदाहरण

.col-container {
  डिस्प्ले: फ्लेक्स;
  विस्तार: 100%;
}
.col {
  फ्लेक्स: 1;
  पैडिंग: 16पिक्सल;
}

आप खुद से प्रयोग करें

ध्यान:इंटरनेट एक्सप्लोरर 10 और अधिक पुरानी संस्करण Flexbox का समर्थन नहीं करते हैं。

संबंधित पृष्ठ

शिक्षा:CSS Flexbox