Görüntüleri yan yana nasıl hizalayacağınız

Önceki Sayfa Yerdeyken Arka Planı Değiştir
Sonraki Sayfa Yuvarlak Kenarlı Görseller

CSS kullanarak nasıl görüntüleri yan yana hizalamayı öğrenin.

Yanyana görsel galerisi

Kendi Kendine Deneyin

Görselleri Yanyana Nasıl Yerleştirilir

İlk Adım - HTML Ekleme:

<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>

İkinci Adım - CSS Ekleme:

CSS'yi nasıl kullanacağınız float Yanyana görseller oluşturmak için özellikler:

Yükleme Örneği

/* Üç görsel konteyneri (dört görsel konteyneri için %25, iki görsel konteyneri için %50, vb.) */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}
/* Görsel konteyneri sonrasını temizleme */
.row::after {
  content: "";
  clear: both;
  display: table;
}

Kendi Kendine Deneyin

CSS'yi nasıl kullanacağınız flex Yanyana görseller oluşturmak için özellikler:

Esnek çerçeve örneği

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

Kendi Kendine Deneyin

Dikkat:Flexbox, Internet Explorer 10 ve daha eski sürümleri desteklemez. Üç sütun oluşturmak için float veya flex kullanmanız gerektiği konusunda kendi kendinize karar verin. Ancak, IE10 ve daha düşük sürümleri desteklemeniz gerekiyorsa, yükleme kullanmalısınız.

İpucu:Esnek çerçeve düzen modülü hakkında daha fazla bilgi edinmek için bizim CSS Flexbox Eğitimi。

Yanıtlayıcı Oluşturma

veya, belirli bir ekran genişliğinde görsellerin yuvarlak olarak yerleştirilmesini sağlamak için medya sorgusu ekleyebilirsiniz, yanyana değil.

Aşağıdaki örnek, 500px genişlik veya daha küçük ekranlarda görselleri dikey olarak yuvarlak yerleştirir:

Yanıtlayıcı Örnek

/* Yanıtlayıcı Düzen - Üç sütunu yanyana değil, yuvarlak şekilde yerleştir */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

Kendi Kendine Deneyin

Medya sorguları hakkında daha fazla bilgi edinmek için bizim CSS Medya Sorgusu Eğitimi。