Kuinka luoda: tasavälysyyttä olevat sarakkeet

Opi, kuinka luoda tasavälysyyttä olevia sarakkeita CSS:n avulla.

Kuinka luoda tasavälysyyttä olevia sarakkeita

Kun sarakkeet tulisi näyttää rinnakkain, sinun yleensä haluat ne olevan samankorkeita (saman korkeuden kanssa).

Kokeile itse!

Vaihe 1 - Lisää HTML:

<div class="col-container">
  <div class="col">
    <h2>Sarakkeessa 1</h2>
    <p>Hello World</p>
  </div>
  <div class="col">
    <h2>Sarakkeessa 2</h2>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
  </div>
  <div class="col">
    <h2>Sarakkeessa 3</h2>
    <p>Muita tekstejä..</p>
    <p>Muita tekstejä..</p>
  </div>
</div>

Vaihe 2 - Lisää CSS:

.col-container {
  display: table; /* Tehdään sisäinen elementti taulukoksi */
  width: 100%; /* Asetetaan täysi leveys laajentaakseen koko sivun */
}
.col {
  display: table-cell; /* Tehdään sisäelementistä taulukon solu */
}

Kokeile itse!

Reagoiva tasavälysyyden

Edellisessä esimerkissä luomamme sarakkeet ovat reagoivia (jos säätää selaimen ikkunan kokoa, ne mukautuvat automaattisesti halutulle leveydelle ja korkeudelle). Mutta pienissä näytöissä (kuten älypuhelimissa), saatat haluta ne sijoittuvan pystysuoraan eikä horisontaalisesti rinnakkain:

Tätä varten lisää media-tarkistus ja määritä sille piste像素arvo:

Esimerkki

/* Jos selaimen ikkuna on alle 600px leveä, aseta sarakkeet pystysuoraan */
@media only screen and (max-width: 600px) {
  .col {
    display: block;
    width: 100%;
  }
}

Kokeile itse!

Tasavälysyyden ja leveyden toteuttaminen Flexboxilla

Voit käyttää Flexboxia myös tasavälysyyttä olevien laatikon luomiseen:

Esimerkki

.col-container {
  display: flex;
  width: 100%;
}
.col {
  flex: 1;
  padding: 16px;
}

Kokeile itse!

Huomioitavaa:Internet Explorer 10 ja aikaisemmat versiot eivät tue Flexboxia.

Liittyvät sivut

Oppitunnit:CSS Flexbox