कैसे करें - दो कॉलम लेआउट
CSS के साथ 2-स्तंभ लेआउट ग्रिड बनाने का तरीका जानें।
कॉलम 1
कुछ पाठ..
कॉलम 2
कुछ पाठ..
टू कॉलम लेआउट कैसे बनाएं
चरण 1) HTML जोड़ें:
उदाहरण
<div class="row">
<div class="column"></div>
<div
class="column"></div>
</div>
चरण 2) सीएसएस जोड़ें:
इस उदाहरण में, हम दो समान कॉलम बनाएंगे :
फ्लोट उदाहरण
.column {
float: left;
width: 50%;
}
/* Clear floats after the
columns */
.row:after {
content: "";
display: table;
clear: both;
}
दो कॉलम बनाने का एक आधुनिक तरीका सीएसएस फ्लेक्सबॉक्स का उपयोग करना है । हालाँकि, यह Internet Explorer 10 और पुराने संस्करणों में समर्थित नहीं है।
फ्लेक्स उदाहरण
.row {
display: flex;
}
.column {
flex: 50%;
}
यह आप पर निर्भर है कि आप दो-स्तंभ लेआउट बनाने के लिए फ़्लोट्स या फ्लेक्स का उपयोग करना चाहते हैं। हालाँकि, यदि आपको IE10 और डाउन के लिए समर्थन की आवश्यकता है, तो आपको फ्लोट का उपयोग करना चाहिए।
युक्ति: फ्लेक्सिबल बॉक्स लेआउट मॉड्यूल के बारे में अधिक जानने के लिए, हमारे सीएसएस फ्लेक्सबॉक्स अध्याय को पढ़ें ।
इस उदाहरण में, हम दो असमान कॉलम बनाएंगे :
उदाहरण
.column {
float: left;
}
.left {
width: 25%;
}
.right {
width: 75%;
}
इस उदाहरण में, हम एक उत्तरदायी दो कॉलम लेआउट बनाएंगे :
उदाहरण
/* Responsive layout - when the screen is less than 600px wide, make the two
columns stack on top of each other instead of next to each other */
@media
screen and (max-width: 600px) {
.column {
width: 100%;
}
}
युक्ति: वेबसाइट लेआउट के बारे में अधिक जानने के लिए हमारे CSS वेबसाइट लेआउट ट्यूटोरियल पर जाएँ।
युक्ति: प्रतिक्रियाशील वेब डिज़ाइन और ग्रिड के बारे में अधिक जानने के लिए हमारे CSS उत्तरदायी वेब डिज़ाइन ट्यूटोरियल पर जाएँ।