Paano magkakasundo ang mga imahe

Nakaraang pahina Palitan ang likuran kapag gumigiling
Susunod na pahina Mga malawak na larawan

Matututunan kung paano magkakasundo ang mga imahe gamit ang CSS.

Mga magkakasunod na larawan na gallery

Subukan ang iyong sarili

Paano maglagay ng mga larawan sa pagkakasunod

Unang hakbang - Magdagdag ng 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>

Ikalawang hakbang - Magdagdag ng CSS:

Paano gamitin ang CSS floating Ating maglagay ng mga katangian ng pagkakasunod ng larawan:

Halimbawa ng floating

/* Tatlong kumpuster ng larawan (apat na kumpuster ay gumagamit ng 25%, dalawang kumpuster ay gumagamit ng 50%, at pagpatuloy sa ganito) */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}
/* Malinis ang pagbubuwal sa likuran ng kumpuster ng larawan */
.row::after {
  content: "";
  clear: both;
  display: table;
}

Subukan ang iyong sarili

Paano gamitin ang CSS flex Ating maglagay ng mga katangian ng pagkakasunod ng larawan:

Halimbawa ng flexible box

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

Subukan ang iyong sarili

Pansin:Ang Flexbox ay hindi sumusuporta sa Internet Explorer 10 at mas maaga. Ang paggamit ng float o flex sa paglikha ng tatlong kolumng laya ay depende sa iyo. Gayunpaman, kung kailangan mong suportahan ang IE10 at mas maaga, dapat mong gamitin ang floating.

Mga payo:Kung gusto mong makakita ng mas maraming impormasyon tungkol sa modulong flexible box, basahin ang aming Tuturo ng CSS Flexbox.

Magdagdag ng responsibilidad

O, maaring magdagdag ka ng media query upang maglagay ng mga larawan sa partikular na lapitan ng layon, sa halip na magkakasunod.

Ang sumusunod na halimbawa ay maglalagay ng mga larawan sa pagkakataong patag sa layong 500px o mas mababa sa lapitan:

Halimbawa ng responsibong pagsasangayon

/* Mga responsibong pagsasangayon - Higit sa lahat ay magkalat sa tatlong kolumng sa halip na magkakasunod */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

Subukan ang iyong sarili

Kung gusto mong makakita ng mas maraming impormasyon tungkol sa media query, basahin ang aming Tuturo ng CSS Media Query.