Üç sütun düzeni nasıl oluşturulur

Üç sütun düzeni nasıl oluşturulur

Birinci adım - HTML ekleyin:

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

İkinci adım - CSS ekleyin:

Bu örnekte, üçEş genişliksütunları:

Örnek

.column {
  float: left;
  width: 33.33%;
}
/* Sütun sonrası yüzdışı temizle */
.row:after {
  content: "";
  display: table;
  clear: both;
}

Deneyin

Bu örnekte, üçFarklı genişliksütunları:

Örnek

.column {
  float: left;
}
.left, .right {
  width: 25%;
}
.middle {
  width: 50%;
}

Deneyin

Bu örnekte, birYanıtlayıcıÜç sütun düzeni:

Örnek

/* Yanıtlayıcı düzen - Ekran genişliği 600px'dan küçük olduğunda, üç sütun yanyana değil, yığınlanır */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Deneyin

İlgili Sayfalar

Eğitim:CSS Web Sitesi Düzeni

Eğitim:CSS Reaktif Web Tasarımı