Je, hauwezi kumwambaa muundo wa kikoloni kubinafsishwa?

Je, hauwezi kumwambaa muundo wa kikoloni kubinafsishwa kwa CSS?

Je, hauwezi kumwambaa muundo wa kikoloni kilichotaka kumaliza kwa kifaa kina, kikoloni kina na kikoloni kina? Muundo huo unaweza kuwa kikoloni kina, kikoloni kina na kikoloni kina kwenye kifaa kilichotaka kina.

Muda wa kubadilisha ukanda wa kifungu cha kifaa, inafaa kuangalia mafanikio ya muundo wa kifaa:

Jaribu kwa mwenyewe

Je, hauwezi kumwambaa muundo wa kikoloni kubinafsishwa?

Kipindi cha kwanza - Ongeza HTML:

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

Kipindi cha pili - Ongeza CSS:

Kwenye matokeo hii, tutakachukua muundo wa makikoloni machache, ambao tutakapokea kama makikoloni kama kina kwenye kifaa kilichotaka 900 mita. Kama kifaa kilichotaka 600 mita, makikoloni yataingia kama kina, haitakuwa kina kama kina.

/* Kujenga makikoloni machache kama kina, haitakuwa kina */
.column {
  float: left;
  width: 25%;
}
/* Usingizi wa kifaa */
.row:after {
  content: "";
  display: table;
   clear: both;
}
/* Muundo wa kifaa - Hifadhi muundo kama kikoloni kiumia kama kikoloni kama kikoloni kiumia kama kikoloni kiumia */
@media screen and (max-width: 900px) {
  .column {
    width: 50%;
  }
}
/* Muundo wa kifaa - Hifadhi kikoloni kama kipande, haitakuwa kifupi kama kina */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Jaribu kwa mwenyewe

相关页面

教程：CSS 网站布局

教程：CSS 响应式网页设计