Samfuriyar yinshu dona yin shaqara gudan

Samfuriyar yinshu CSS dona yin shaqara gudan

Kiyayya da samar da kwayoyin yanar gizo a kaiyewa

Mafi ɗaya - Tamba 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>

Mafi ɗaya - Tamba CSS:

Kiyayya da amfani da CSS float Kware da kewayoyin kwayoyin yanar gizo

Tunawa kwayoyin yanar gizo

/* Tiga kwayoyin yanar gizo (shekaru huɗu kwayoyin yanar gizo da 25%, abin da shekaru biyu kwayoyin yanar gizo da 50%, kuma kuma kuma) */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}
/* Rarrabe kwayoyin yanar gizo da ke bayan wa'aden kwayoyin yanar gizo */
.row::after {
  content: "";
  clear: both;
  display: table;
}

Duba shi daidai

Kiyayya da amfani da CSS flex Kware da kewayoyin kwayoyin yanar gizo

Tunawa kwayoyin yanar gizo

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

Duba shi daidai

Rarrabe:Flexbox bai su saka amfani da Internet Explorer 10 ko kuma yadda suke kaiyewa. Kuma, amfani da float ko flex don samar da kwayoyin yanar gizo da kaiyewa. Amma, amfani da float domin tasiri a IE10 ko kuma yadda suke kaiyewa.

Kiyayya:Don bayanar da yau da kware kan modul na kwayoyin yanar gizo na kwayoyin yanar gizo, za a kifiyarsa Tarin CSS Flexbox.

Samar da tunawa

amma, amfani da kwayoyin yanar gizo don samar da wa'aden kwayoyin yanar gizo a kaiyewa na nau'in kwayoyin yanar gizo ga kaiyewa na nau'in kwayoyin yanar gizo ga kaiyewa na nau'in kwayoyin yanar gizo na kamar yadda suke saukiwarsa.

Amfani da wannan shi na samar da wa'aden kwayoyin yanar gizo a kaiyewa na 500px ko kuma yadda suke kaiyewa

Tunawa kwayoyin yanar gizo

/* Ajiya kwayoyin yanar gizo - yana samar da wa'aden kwayoyin da ke kiyuwa kamar yadda suke saukiwarsa */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

Duba shi daidai

Don bayanar da yau da kware kan kwayoyin yanar gizo, za a kifiyarsa Tarin CSS da kwayoyin yanar gizo.

Mitaudo da yawa

Tarin:CSS 图像

Tarin:CSS da kwayoyin kwayan

Tarin:CSS 图片库