फ्लेक्स के साथ मोबाइल से डेस्कटॉप तक 1, 2, 3 कॉलम लेआउट

Question

यहाँ मैं इसके लिए जा रहा हूँ:

enter image description here

और मुझे इसे फ्लेक्स के साथ करने की ज़रूरत है। लेकिन मैं जो कोशिश कर रहा हूं वह काम नहीं कर रहा है:

.content-wrapper,
.tablet-top,
.tablet-middle,
.tablet-bottom {
  display: flex;
  justify-content: center;
}


/*tablet*/

@media (min-width: 426px) and (max-width: 767px) {
  .tablet-top,
  .tablet-middle,
  .tablet-bottom {
flex-direction: row;
  }
  .content-wrapper {
flex-direction: column;
  }
}


/*mobile*/

@media (min-width: 0) and (max-width: 425px) {
  .content-wrapper,
  /* added */
  .tablet-top,
  .tablet-middle,
  .tablet-bottom {
flex-direction: column;
align-items: center;
/* added */
  }
}

<div class="content-wrapper">
  <div class="tablet-top">
    <div class="dog"><img src="https://i.imgur.com/RJdUaQ0.png" height="100" width="140"/>
    <div class="cat"><img src="https://i.imgur.com/bHoUb1x.png" height="100" width="140"/>
  </div>
  <div class="tablet-middle">
    <div class="mouse"><img src="https://i.imgur.com/IqUglWY.png" height="100" width="140"/>
    <div class="snake"><img src="https://i.imgur.com/IHaFNSs.png" height="100" width="140"/>
  </div> 
  <div class="tablet-bottom">
    <div class="cow"><img src="https://i.imgur.com/JTFwdZT.png" height="100" width="140"/>
    <div class="pig"><img
src="https://i.imgur.com/rzKcrup.png"
height="100" width="140"/>
  </div>
</div>

क्या हमें डेस्कटॉप पर एक ही पंक्ति में dog, cat, और mouse प्रदर्शित करने के लिए HTML में एक और div जोड़ने की आवश्यकता नहीं होगी?

अगर हम ऐसा करते तो क्या यह जवाबदेही नहीं तोड़ता? साथ ही, मेरा वर्तमान कोड टैबलेट पर काम नहीं कर रहा है - इसे tablet-top, tablet-middle, और tablet-bottom divs को तीन अलग-अलग पंक्तियों में तोड़ना चाहिए।

html css flexbox

1

HappyHands31 1 सितंबर 2021, 18:28

Answer 1

एचटीएमएल:

.content-wrapper{
  margin-top: 5rem;
  margin-left: 7rem;
}

.tablet-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-column-gap: 9rem;
  grid-row-gap: 5rem;
}

<div class="content-wrapper">
      <div class="tablet-top">
        <img src="https://i.imgur.com/RJdUaQ0.png" height="100" width="140" />
        <img src="https://i.imgur.com/bHoUb1x.png" height="100" width="140" />
        <img src="https://i.imgur.com/IqUglWY.png" height="100" width="140" />
        <img src="https://i.imgur.com/IHaFNSs.png" height="100" width="140" />
        <img src="https://i.imgur.com/JTFwdZT.png" height="100" width="140" />
        <img src="https://i.imgur.com/rzKcrup.png" height="100" width="140" />
      </div>
    </div>

1

MaxiGui 1 सितंबर 2021, 18:46

Answer 2

सबसे पहले आप अपने सीएसएस की पहली पंक्ति पर , भूल गए, आपको लिखना चाहिए: .tablet-middle .tablet-bottom के बजाय .tablet-middle .tablet-bottom।

अपने मीडिया प्रश्नों में रैपर पर जोड़ें:

.content-wrapper{
    display:flex;
    flex-direction: column;
  }

डेमो

.content-wrapper, .tablet-top, .tablet-middle,
.tablet-bottom {
  display: flex;
}

/*mobile*/
@media (min-width: 0) and (max-width: 425px) {
  .content-wrapper{
    display:flex;
    flex-direction: column;
  }
  .tablet-top, .tablet-middle, .tablet-bottom {
    flex-direction: column;
  }
}

/*tablet*/
@media (min-width: 426px) and (max-width: 767px) {
  .content-wrapper{
    display:flex;
    flex-direction: column;
  }
  .tablet-top, .tablet-middle, .tablet-bottom {
    flex-direction: row;
  }
}

<div class="content-wrapper">
  <div class="tablet-top">
    <div class="dog"><img src="https://i.imgur.com/RJdUaQ0.png" height="100" width="140"/></div>
    <div class="cat"><img src="https://i.imgur.com/bHoUb1x.png" height="100" width="140"/></div>
  </div>
  <div class="tablet-middle">
    <div class="mouse"><img src="https://i.imgur.com/IqUglWY.png" height="100" width="140"/></div>
    <div class="snake"><img src="https://i.imgur.com/IHaFNSs.png" height="100" width="140"/></div>
  </div> 
  <div class="tablet-bottom">
    <div class="cow"><img src="https://i.imgur.com/JTFwdZT.png" height="100" width="140"/></div>
    <div class="pig"><img
src="https://i.imgur.com/rzKcrup.png"
height="100" width="140"/></div>
  </div>
</div>

2

isherwood 1 सितंबर 2021, 18:46

Answer 3

आपके पास कुछ टाइपो (एक , दो वर्गों के बीच गायब है) और divs छवियों के आसपास बंद नहीं हैं।

आप पूरी चीजों को केन्द्रित करने के लिए संरेखण नियमों को भी याद कर रहे हैं:

जिस तरह से मैं आपके अपेक्षित परिणाम को समझता हूं, उसमें कोड तय किया गया है।

.content-wrapper,
.tablet-top,
.tablet-middle,/* here : , as missing */
.tablet-bottom {
  display: flex;
  justify-content: center;
  /* added */
}


/*tablet*/

@media (min-width: 426px) and (max-width: 767px) {
  .tablet-top,
  .tablet-middle,
  .tablet-bottom {
    flex-direction: row;
  }
  .content-wrapper {
    flex-direction: column;
    /* added */
  }
}


/*mobile*/

@media (min-width: 0) and (max-width: 425px) {
  .content-wrapper,
  /* added */
  .tablet-top,
  .tablet-middle,
  .tablet-bottom {
    flex-direction: column;
    align-items: center;
    /* added */
  }
}

<div class="content-wrapper">
  <div class="tablet-top">
    <div class="dog">
      <img src="https://i.imgur.com/RJdUaQ0.png" height="100" width="140" />
    </div><!-- close it ! -->
    <div class="cat">
      <img src="https://i.imgur.com/bHoUb1x.png" height="100" width="140" />
    </div><!-- close it ! -->
  </div>
  <div class="tablet-middle">
    <div class="mouse">
      <img src="https://i.imgur.com/IqUglWY.png" height="100" width="140" />
    </div> <!-- close it ! -->
    <div class="snake">
      <img src="https://i.imgur.com/IHaFNSs.png" height="100" width="140" />
    </div><!-- close it ! -->
  </div>
  <div class="tablet-bottom">
    <div class="cow">
      <img src="https://i.imgur.com/JTFwdZT.png" height="100" width="140" />
    </div>
    <div class="pig">
      <img src="https://i.imgur.com/rzKcrup.png" height="100" width="140" />
    </div><!-- close it ! -->
  </div>
</div>

0

G-Cyrillus 1 सितंबर 2021, 18:50

फ्लेक्स के साथ मोबाइल से डेस्कटॉप तक 1, 2, 3 कॉलम लेआउट

3 जवाब

डेमो

संबंधित सवाल

नए सवाल