Nasıl oluşturulur: İki sütun düzeni

İki sütun düzeni nasıl oluşturulur

İlk Adım - HTML Ekleme:

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

İkinci Adım - CSS Ekleme:

Bu örnekte, ikiEş genişliksütunları:

Yükleme Örneği

.column {
  float: left;
  width: 50%;
}
/* Sütunların ardından yüklemeyi temizle */
.row:after {
  content: "";
  display: table;
  clear: both;
}

Kişisel Olarak Deneyin

İki sütun düzeni oluşturmanın modern bir yolu, CSS Flexbox kullanmaktır. Ancak, bu, Internet Explorer 10 ve daha eski sürümleri desteklemez.

Flex Örneği

.row {
  display: flex;
}
.column {
  flex: 50%;
}

Kişisel Olarak Deneyin

İki sütun düzeni oluşturmak için yükleme veya flex kullanabilirsiniz. Ancak, IE10 ve daha eski sürümleri desteklemek gerekiyorsa, yükleme kullanmalısınız.

İpucu:Flexible Box Layout Modülü hakkında daha fazla bilgi edinmek için, bizim CSS Flexbox Rehberi。

Bu örnekte, iki farklı genişlikteki sütun oluşturacağız:

Örnek

.column {
  float: left;
}
.left {
  width: 25%;
}
.right {
  width: 75%;
}

Kişisel Olarak Deneyin

Bu örnekte, birYanıtlayıcıİki sütun düzeni:

Örnek

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

Kişisel Olarak Deneyin

İlgili Sayfalar

Rehber:CSS web sitesi düzeni

Rehber:CSS Yanıtlayıcı Web Sayfa Tasarımı