कैसे बनाया जाता है: मिश्रित स्तम्भ व्यवस्था

मिश्रित स्तम्भ व्यवस्था कैसे बनाएं

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

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

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

इस उदाहरण में, हम एक चार स्तम्भ व्यवस्था बनाएंगे, जो 900 पिक्सल विस्तार के नीचे के स्क्रीन पर दो स्तम्भ में बदल जाएगा। लेकिन 600 पिक्सल विस्तार के नीचे, स्तम्भ साथ-साथ नहीं, बल्कि स्टैक कर जाएंगे。

/* चार समान चौड़ाई वाले स्तम्भ बनाएं, ताकि वे एक साथ फ्लॉट कर सकें */
.column {
  float: left;
  width: 25%;
}
/* फ्लॉट को साफ करना */
.row:after {
  content: "";
  display: table;
   clear: both;
}
/* प्रतिक्रियाशील व्यवस्था - व्यवस्था को दो स्तम्भ से चार स्तम्भ के लिए बदलना */
@media screen and (max-width: 900px) {
  .column {
    width: 50%;
  }
}
/* प्रतिक्रियाशील व्यवस्था - दो स्तम्भ को स्टैक करने के लिए, नहीं कि साथ में */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

स्वयं प्रयोग कीजिए

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

शिक्षण:CSS वेबसाइट लेआउट

शिक्षण:CSS रिस्पांसिव वेबसाइट डिजाइन