CSS Düzen - Yükleme Örneği

Bu sayfa yaygın kayan örnekleri sağlar.

Ağ / Eş genişlikli kutu

Box 1
Box 2
Box 1
Box 2
Box 3

Kullanarak float Özelliği, yan yana kayan içerik kutularını kolayca oluşturabilir:

örnek

* {
  box-sizing: border-box;
}
.box {
  float: left;
  width: 33.33%; /* Üç kutu (dört kutu için 25%, iki kutu için 50%, vb.) */
  padding: 50px; /* Resimler arasında boşluk eklemek için */
}

Kişisel olarak deneyin

Box-sizing nedir?

Üç kayan kutuyu yan yana oluşturmak kolaydır. Ancak, her kutunun genişliğini genişletmek için bazı içerik eklediğinizde (örneğin, iç boşluk veya kenar çizgisi) bu kutu zarar görür. box-sizing Özellik, kutu toplam genişliğini (ve yüksekliğini) içeren iç boşluk ve kenar çizgilerini içerir, böylece iç boşluk kutu içinde kalır ve yırtılmaz.

Sitemizde CSS Box Sizing Bu bölümde box-sizing özelliği hakkında daha fazla bilgi öğreneceksiniz.

Görüntüler yan yana

Bu kutu ağı (The grid of boxes) aynı zamanda yan yana gösterim için de kullanılabilir:

örnek

.img-container {
  float: left;
  width: 33.33%; /* Üç kutu (dört kutu için 25%, iki kutu için 50%, vb.) */
  padding: 5px; /* Resimler arasında boşluk eklemek için */
}

Kişisel olarak deneyin

Eş genişlikli kutu

Örnekte, eşit genişlikte paralel olarak kayan kutuların nasıl oluşturulduğunu öğrendiniz. Ancak, aynı yükseklikteki kayan kutular oluşturmak kolay değil. Ancak, hızlı bir çözüm, aşağıdaki gibi sabit bir yükseklik ayarlamakdır:

Box 1

Some content, some content, some content

Box 2

Some content, some content, some content

Some content, some content, some content

Some content, some content, some content

örnek

.box {
  height: 500px;
}

Kişisel olarak deneyin

Ancak, böyle yaparsanız esneklik kaybedilir. Kutudaki içeriklerin her zaman aynı sayıda olduğundan emin olabilirseniz, bu olabilir. Ancak, çoğu zaman içerikler farklıdır. Cep telefonunda üstteki örneği denerseniz, ikinci kutudaki içeriklerin kutunun dışında görüneceğini göreceksiniz. Bu, CSS3 Flexbox'in devreye girdiği yerdir - çünkü en uzun kutu kadar otomatik olarak genişletebilir:

örnek

Elastik çerçeve oluşturmak için Flexbox kullanın:

Box 1 - İçeriğin gerçekten çok yüksek olduğundan emin olmak için bazı metinler. Bu metinler, içeriğin gerçekten çok yüksek olduğundan emin olmak için bazı metinler. Bu metinler, içeriğin gerçekten çok yüksek olduğundan emin olmak için bazı metinler. Bu metinler, içeriğin gerçekten çok yüksek olduğundan emin olmak için bazı metinler. Bu metinler, içeriğin gerçekten çok yüksek olduğundan emin olmak için bazı metinler.
Box 2 - Benim yüksekliğim Box 1'i takip edecek.

Kişisel olarak deneyin

Flexbox'in tek sorunu, Internet Explorer 10 veya daha eski sürümlerde çalışmamasıdır. Üzerinde çalışmayı denerseniz, ikinci kutudaki içeriklerin kutunun dışında görüneceğini göreceksiniz. Bu, CSS3 Flexbox'in devreye girdiği yerdir - çünkü en uzun kutu kadar otomatik olarak genişletebilir: CSS Flexbox Bölümde, Flexbox düzen modülü hakkında daha fazla bilgi edinin.

Navigasyon menüsü

Taşı float Süperlink listeleri ile birlikte kullanılarak, yatay menü oluşturmak için:

örnek

Kişisel olarak deneyin

Web düzeni örnekleri

kullanım float Özellik, tam bir Web düzeni tamamlamak da yaygındır:

örnek

.header, .footer {
  background-color: grey;
  color: white;
  padding: 15px;
}
.column {
  float: left;
  padding: 15px;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.menu {
  width: 25%;
}
.content {
  width: 75%;
}

Kişisel olarak deneyin

Daha fazla örnek

Çerçeve ve kenar boşluğu ile görsel paragrafın sağına yüklü
Görseli paragrafın sağına yükle. Görsel üzerine çerçeve ve kenar boşluğu ekleyin.
Başlıklı görsel sağa yüklü
Başlıklı bir görseli sağa yükle.
Paragrafın ilk harfini sola yükle
Paragrafın ilk harfini sola yükle ve bu harfin stilini ayarlayın.
Bir web sitesi oluşturmak için yükleme kullanın
Düzey navigasyon çubuğu, başlık, alt başlık, sol navigasyon çubuğu ve ana içeriği içeren bir ana sayfa oluşturmak için yükleme kullanın.

tüm CSS yükleme özellikleri

özellik tanım
box-sizing 元素的 genişliği ve yüksekliğinin hesaplanma yöntemini tanımla: bunlar iç dolgu ve çerçeve içermeli mi?
clear Temizlenen elementin yanında yüzeysel akıtılabilecek olan elementleri ve hangi tarafta yüzeysel akıtılacağını belirler.
float Elementin nasıl yüzeysel akıtılacağını belirler.
overflow İçerik elementi çerçevesi aşarsa neler olacağını belirler.
overflow-x Yüzeysel akış elementinin içerik alanı aşarsa, içeriğin sol/sağ kenarlarının nasıl ele alınacağını belirler.
overflow-y Yüzeysel akış elementinin içerik alanı aşarsa, içeriğin üst/dış kenarlarının nasıl ele alınacağını belirler.