कैसे बनाएं: चार स्तम्भ लेआउट

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

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

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

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

इस उदाहरण में, हम चार स्तम्भ लेआउट को बनाएंगे:

उदाहरण

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

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

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

उदाहरण

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

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

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

शिक्षण:CSS वेबसाइट विन्यास

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