Nasıl oluşturulur: Yan yana tablo

Yanyana tablo nasıl yapılır

CSS nasıl kullanılır float Yanyana tablo oluşturma özellikleri

Örnek

* {
  box-sizing: border-box;
}
/* İki sütun düzeni oluşturma */
.column {
  float: left;
  width: 50%;
  padding: 5px;
}
/* Clearfix（temizleme kayması） */
.row::after {
  content: "";
  clear: both;
  display: table;
}

Kişisel olarak deneyin

CSS nasıl kullanılır flex Yanyana tablo oluşturma özellikleri

Örnek

* {
  box-sizing: border-box;
}
.row {
  display: flex;
}
.column {
  flex: 50%;
  padding: 5px;
}

Kişisel olarak deneyin

Dikkat:Flexbox Internet Explorer 10 ve daha eski sürümlerinde desteklenmemektedir. Yanıtlayıcılık kullanmayı tercih edin mi? float veya flex Size bağlıdır. Ancak, IE10 ve daha eski sürümleri desteklemek gerekiyorsa float.

İpucu:Flexible Box Düzen Modülü hakkında daha fazla bilgi edinmek için bizim CSS Flexbox Eğitimi.

Yanıtlayıcılık Ekle

Yukarıdaki örnek, iki sütun移动设备上看起来会不太美观，因为两列会占据页面过多的空间。

Yanıtlayıcı tablo oluşturmak için, iki sütun düzeninden mobil cihazlardaki tam genişlik düzenine geçiş yapmasını sağlamak için aşağıdaki medya sorgusunu ekleyin:

Örnek

/* Yanıtlayıcı düzen - 600 pikselden küçük ekranlarda iki sütun yanyana durmaz,而是堆叠 */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Kişisel olarak deneyin

İlgili sayfa

Eğitim:CSS tablo

Eğitim:CSS yüzeysel

Eğitim:CSS Flexbox