कैसे बनाया जाता है: दो स्तम्भ लेआउट

कैसे दो स्तम्भ लेआउट बनाएं

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

<div class="row">
  <div class="column"></div>
  <div class="column"></div>
</div>

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

इस उदाहरण में, हम दोसमान विस्तारके स्तम्भ:

फ्लॉटिंग उदाहरण

.column {
  float: left;
  विस्तार: 50%;
}
/* स्तम्भ के बाद के फ्लॉटिंग को साफ करें */
.row:after {
  content: "";
  display: table;
  clear: both;
}

स्वयं प्रयोग करें

दो स्तम्भ लेआउट को बनाने का आधुनिक तरीका CSS Flexbox का उपयोग करना है। लेकिन यह Internet Explorer 10 और उससे पुराने संस्करण का समर्थन नहीं करता है。

Flex उदाहरण

.row {
  display: flex;
}
.column {
  flex: 50%;
}

स्वयं प्रयोग करें

आप फ्लॉटिंग या flex का उपयोग करके दो स्तम्भ लेआउट को बना सकते हैं। लेकिन अगर आप IE10 और उससे पुरानी संस्करण का समर्थन करना चाहते हैं, तो फ्लॉटिंग का उपयोग करें।

टिप्पणी:Flexible Box Layout Module के बारे में अधिक जानकारी प्राप्त करने के लिए हमारे CSS Flexbox शिक्षा。

इस उदाहरण में, हम दो असमान विस्तार वाले स्तम्भ को बनाएंगे:

उदाहरण

.column {
  float: left;
}
.left {
  विस्तार: 25%;
}
.right {
  विस्तार: 75%;
}

स्वयं प्रयोग करें

इस उदाहरण में, हम एकरिस्पोंसिवदो स्तम्भ लेआउट:

उदाहरण

/* रिस्पोंसिव लेआउट - जब स्क्रीन चौड़ाई 600px से कम है, तो दो स्तम्भ को स्टैक करें, न कि साथ-साथ */
@media screen and (max-width: 600px) {
  .column {
    विस्तार: 100%;
  }
}

स्वयं प्रयोग करें

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

तस्वीर:CSS वेबसाइट लेआउट

तस्वीर:CSS रिस्पोंसिव वेब डिजाइन