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

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

पहला कदम - एचटीएमएल जोड़ें:

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

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

इस उदाहरण में, हम तीनसमान चौड़ाईके स्तम्भ:

उदाहरण

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

स्वयं प्रयास करें

इस उदाहरण में, हम तीनअसमान चौड़ाईके स्तम्भ:

उदाहरण

.column {
  float: left;
}
.left, .right {
  width: 25%;
}
.middle {
  width: 50%;
}

स्वयं प्रयास करें

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

उदाहरण

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

स्वयं प्रयास करें

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

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

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