Jinsi ya kumwua: Muundo wa mitukio mitano

Jinsi ya kumwua muundo wa mitukio mitano

Tengeneza nyingi - Ongeza HTML:

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

Tengeneza nyingi - Ongeza CSS:

Kwenye mfano huu, tutaunda muundo wa mitukio mitano:

Mfano

.column {
  float: left;
  width: 25%;
}
/* Kusaidia kusimamia mitukio inayofikia kina */
.row:after {
  content: "";
  display: table;
  clear: both;
}

Jifunze tena

Kwenye mfano huu, tutaunda kwa mfano huuMuundo wa kusaidia vifaaMuundo wa mitukio mitano:

Mfano

/* Muundo wa kusaidia vifaa - kama ukurungu wa ekranu ulichukua ukiwa 600px, kusaidia mitukio kwa mitukio yenye kina, hali inayofikia kina hizi kwa sababu ya uharibifu wa kina */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Jifunze tena

Jina ya kufanya: Mawio ya kusoma juu ya kufikia

Jina ya kufanya: Mafunzo ya juuJina ya kufanya: Kina kuu ya mawio

Jina ya kufanya: Mafunzo ya juuJina ya kufanya: Mafunzo ya CSS ya kusoma juu ya kufikia