कैसे करें - समान ऊंचाई
CSS के साथ समान ऊंचाई वाले कॉलम बनाने का तरीका जानें।
समान ऊंचाई वाले कॉलम कैसे बनाएं
जब आपके पास ऐसे स्तंभ हों जो साथ-साथ दिखाई देने चाहिए, तो आप अक्सर चाहते हैं कि वे समान ऊँचाई के हों (उच्चतम की ऊँचाई से मेल खाते हुए)।
समस्या:
आकांक्षा:
चरण 1) HTML जोड़ें:
उदाहरण
<div class="col-container">
<div class="col">
<h2>Column 1</h2>
<p>Hello World</p>
</div>
<div class="col">
<h2>Column 2</h2>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
</div>
<div class="col">
<h2>Column 3</h2>
<p>Some other text..</p>
<p>Some other text..</p>
</div>
</div>
चरण 2) सीएसएस जोड़ें:
उदाहरण
.col-container {
display: table; /* Make the
container element behave like a table */
width: 100%; /*
Set full-width to expand the whole page */
}
.col {
display: table-cell; /* Make elements inside the container behave like table
cells */
}
उत्तरदायी समान ऊँचाई
पिछले उदाहरण में हमने जो कॉलम बनाए हैं, वे उत्तरदायी हैं (यदि आप कोशिश करें उदाहरण में ब्राउज़र विंडो का आकार बदलते हैं, तो आप देखेंगे कि वे स्वचालित रूप से आवश्यक चौड़ाई और ऊंचाई में समायोजित हो जाते हैं)। हालाँकि, छोटी स्क्रीन (जैसे स्मार्टफ़ोन) के लिए, आप चाहते हैं कि वे क्षैतिज के बजाय लंबवत रूप से स्टैक करें:
मध्यम और बड़ी स्क्रीन पर:
नमस्ते दुनिया।
नमस्ते दुनिया।
नमस्ते दुनिया।
नमस्ते दुनिया।
नमस्ते दुनिया।
छोटे पर्दे पर:
नमस्ते दुनिया।
नमस्ते दुनिया।
नमस्ते दुनिया।
नमस्ते दुनिया।
नमस्ते दुनिया।
इसे प्राप्त करने के लिए, एक मीडिया क्वेरी जोड़ें और यह कब होना चाहिए, इसके लिए एक ब्रेकपॉइंट पिक्सेल मान निर्दिष्ट करें:
उदाहरण
/* If the browser window is smaller than 600px, make the columns stack on top
of each other */
@media only screen and (max-width: 600px) {
.col {
display: block;
width: 100%;
}
}
फ्लेक्सबॉक्स का उपयोग करके समान ऊंचाई और चौड़ाई
आप समान ऊंचाई वाले बॉक्स बनाने के लिए फ्लेक्सबॉक्स का भी उपयोग कर सकते हैं:
उदाहरण
.col-container {
display: flex;
width: 100%;
}
.col {
flex: 1;
padding: 16px;
}
नोट: फ्लेक्सबॉक्स इंटरनेट एक्सप्लोरर 10 और पुराने संस्करणों में समर्थित नहीं है।
टिप: हमारे CSS Flexbox Tutorial में फ्लेक्सिबल बॉक्स के बारे में और पढ़ें ।