Nasıl oluşturulur: Dört sütun düzeni

Dört sütun düzeni nasıl oluşturulur

İlk adım - HTML ekleyin:

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

İkinci adım - CSS ekleyin:

Bu örnekte, dört sütun düzeni oluşturacağız:

Örnek

.column {
  float: left;
  width: 25%;
}
/*列后的浮动清除*/
.row:after {
  content: "";
  display: table;
  clear: both;
}

Deneyin

Bu örnekte, bir响应式Dört sütun düzeni:

Örnek

/*响应式布局 - 屏幕宽度小于600px时，使三列堆叠，而不是并排*/
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Deneyin

İlgili sayfalar

Eğitim:CSS web sitesi düzeni

Eğitim:CSS duyarlı web tasarımı