Miten luoda: neljasarakkeinen asettelu

Miten luoda neljasarakkeinen asettelu

Ensimmäinen vaihe - Lisää HTML:

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

Toinen vaihe - Lisää CSS:

Tässä esimerkissä luomme neljasarakkeisen asettelun:

Esimerkki

.column {
  float: left;
  width: 25%;
}
/* Poista sarakkeen jälkeen liukaus */
.row:after {
  content: "";
  display: table;
  clear: both;
}

Kokeile itse

Tässä esimerkissä luommeVastaavuusNeljasarakkeinen asettelu:

Esimerkki

/* Vastaavuuslaitteisto - Kun näytön leveys on alle 600px, kolme saraketta kertyvät eikä ne ole rinnakkaisia */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Kokeile itse

Liittyvät sivut

Oppitunnit:CSS-verkkosivuston asettelu

Oppitunnit:CSS vastausvaihteleva web-sivuston suunnittelu