Nasıl oluşturulur: Eş yüksek sütun

CSS kullanarak eş yüksek sütun nasıl oluşturulurunu öğrenin.

Eş yüksek sütun nasıl oluşturulur

Sütunlarınız yan yana görüntülenmeliyken, genellikle aynı yüksekliğe sahip olmalarını istersiniz (en yüksek yüksekliğe uyum sağlar).

Kişisel olarak deneyin

İlk adım - HTML ekleyin:

<div class="col-container">
  <div class="col">
    <h2>Sütun 1</h2>
    <p>Merhaba Dünya</p>
  </div>
  <div class="col">
    <h2>Sütun 2</h2>
    <p>Merhaba Dünya!</p>
    <p>Merhaba Dünya!</p>
    <p>Merhaba Dünya!</p>
    <p>Merhaba Dünya!</p>
  </div>
  <div class="col">
    <h2>Sütun 3</h2>
    <p>Diğer metin...</p>
    <p>Diğer metin...</p>
  </div>
</div>

İkinci adım - CSS ekleyin:

.col-container {
  display: table; /* Konteyner elemanlarını tablo gibi davranmaya getir */
  width: 100%; /* Tam genişlik olarak ayarlanır, tüm sayfayı genişletir */
}
.col {
  display: table-cell; /* Konteyner içindeki öğeleri tablo hücresi gibi davranmaya getir */
}

Kişisel olarak deneyin

Uyumlu eş yüksek

Önceki örnekte oluşturduğumuz sütunlar yan yana görüntülenecek şekilde uyumludur (tarayıcı penceresinin boyutunu ayarladığınızda, otomatik olarak gerekli genişlik ve yüksekliğe ayarlanacaklarını göreceksiniz). Ancak, küçük ekranlar için (örneğin, akıllı telefonlar), dikey olarak yığın halinde görmek yerine yatay olarak yan yana yerleştirmek isteyebilirsiniz:

Bu amaca ulaşmak için bir medya sorgusu ekleyin ve bu sorguya bir kesin pixel değeri atayın:

Örnek

/* Eğer tarayıcı penceresi 600px'dan küçükse, sütunları yığın halinde yap */
@media only screen and (max-width: 600px) {
  .col {
    display: block;
    width: 100%;
  }
}

Kişisel olarak deneyin

Flexbox ile eş yüksek ve eş genişlik

Sizin Flexbox kullanarak eş yüksek kutular oluşturabilirsiniz:

Örnek

.col-container {
  display: flex;
  width: 100%;
}
.col {
  flex: 1;
  padding: 16px;
}

Kişisel olarak deneyin

Dikkat:Internet Explorer 10 ve daha eski sürümler Flexbox'u desteklememektedir.

İlgili sayfalar

Eğitim:CSS Flexbox