Kuinka luoda: kolmen sarakkeen asettelu

Kuinka luoda kolmen sarakkeen asettelu

Vaihe 1 - Lisää HTML:

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

Vaihe 2 - Lisää CSS:

Tässä esimerkissä luomme kolmeYhtä leveätsarakkeet:

Esimerkki

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

Kokeile itse

Tässä esimerkissä luomme kolmeEi yhtä leveätsarakkeet:

Esimerkki

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

Kokeile itse

Tässä esimerkissä luommeResponsiivinenKolmen sarakkeen asettelu:

Esimerkki

/* Responsiivinen asettelu - kun näytön leveys on alle 600px, kolme saraketta asetetaan ylekköihin eikä rinnakkain */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Kokeile itse

Liittyvät sivut

Oppitunnit:CSS-verkkosivuston asettelu

Oppitunnit:CSS-vastausvietoisen verkkosivun suunnittelu