Kuinka asettaa kuvat rinnakkain

Opi, miten CSS:ää käytetään kuvien rinnakkaisessa asettamisessa.

Kuinka asettaa kuvat rinnakkain

Vaihe 1 - Lisää HTML:

<div class="row">
  <div class="column">
    <img src="img_snow.jpg" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="img_forest.jpg" alt="Forest" style="width:100%">
  </div>
  <div class="column">
    <img src="img_mountains.jpg" alt="Mountains" style="width:100%">
  </div>
</div>

Vaihe 2 - Lisää CSS:

Miten käyttää CSS float Ominaisuudet luodaksesi rinnakkaiset kuvat:

Liikkuvuus esimerkki

/* Kolme kuvakonttoria (neljä kuvakonttoria käyttää 25%, kaksi kuvakonttoria käyttää 50%, ja niin edelleen) */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}
/* Poista kuvakonttorin jälkeen liikkuvuus */
.row::after {
  content: "";
  clear: both;
  display: table;
}

Kokeile itse

Miten käyttää CSS flex Ominaisuudet luodaksesi rinnakkaiset kuvat:

Joustavuusasettelu esimerkki

.row {
  display: flex;
}
.column {
  flex: 33.33%;
  padding: 5px;
}

Kokeile itse

Huomio:Flexbox ei tue Internet Explorer 10 ja aikaisempia versioita. Kolmen sarakkeen luominen float tai flex -avulla riippuu sinusta. Mutta jos tarvitset tuen IE10 ja aikaisemmille versioille, sinun tulisi käyttää float.

Vinkki:Lisätietoja joustavuusasettelu模塊 löydät lukemalla CSS Flexbox-opas。

Lisää responsiivisuus

Tai voit lisätä mediahakun, jotta kuvat asettuvat tiettyyn näytönleveyteen pystysuoraan eikä rinnakkain.

Seuraava esimerkki asettaa kuvat pystysuoraan 500px:n tai pienemmän näytön leveydellä:

Responsiivinen esimerkki

/* Responsiivinen asettelu - kolme saraketta yhdessä sijaan rinnakkain */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

Kokeile itse

Lisätietoja mediahauista löydät lukemalla CSS-mediahaku-opas。

Liittyvät sivut

Oppitunti:CSS kuva

Oppitunti:CSS-lähestymistapa

Oppitunti:CSS kuvakirjasto