Css kutu modeli ile oluşturulan div etiketlerinin yan yana görüntülenmesi örneği ve yapımı.

Css kutu modeli örneği ve float

Div etiketleri block - level elemanlar olduğundan tarayıcıda alt alta görüntülenirler. Bunların yan yana gelebilmesi için float css komutunun kullanılması gerekir. Float komutuna left ya da right değerini vererek div etiketleri yan yana görüntülenir. 

Aşağıdaki html sayfamızı div etiketi kullanarak kutumuzu hazırlıyoruz ve içeriği bu etiketin içerisine yerleştiryoruz.

<!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>kutu modeli kullanımı</title>
  <link rel="stylesheet" href="arkaplan.css">
 </head>
<body>
  <div>
    <img src="esofman.jpg">
    <p>Eşofman Altı <br>
          24,95 TL <br>
          Ürünü İncele ></p>
  </div>

  <div>
    <img src="esofmanalti.jpg">
    <p>Eşofman Altı <br>
    12,95 TL <br>
    Ürünü İncele ></p> 
  </div>

  <div>
    <img src="kaban.jpg">
    <p>Kaban <br>
    139,95 TL <br>
    Ürünü İncele ></p> 
  </div>

  <div>
    <img src="mont.jpg">
    <p>Mont <br>
    149,95 TL <br>
    Ürünü İncele ></p> 
    </div>
</body>
</html>

Aşağıda verilen css kodlarını arkaplan.css olarak kaydedip, dosyalarımızın yan yana olduklarını kontrol ediyoruz.

div {
    padding:15px 15px;
    margin:10px;
    width: 250px;
    text-align: center;
    float:left;  }
p {
    font:normal 14px Century gothic;   }
img {
     width: 250px;
     height: 349px;   }
  • Yazı Etiketleri :
  • float
  • css kutu modeli
Css ile yatay ve dikey menu oluşturma, kutu modeli içerisinde kullanma
Yazıyı Oku

Css ile yatay ve dikey menu oluşturma, kutu modeli içerisinde kullanma

Css ile position: fixed kullanımı
Yazıyı Oku

Css ile position: fixed kullanımı

Nesne tabanlı programlama metot çağırma uygulamaları
Yazıyı Oku

Nesne tabanlı programlama metot çağırma uygulamaları

Css kutu modeli örneği ve konumlandırma
Yazıyı Oku

Css kutu modeli örneği ve konumlandırma

Css ile çoklu arkaplan uygulaması
Yazıyı Oku

Css ile çoklu arkaplan uygulaması

Fare tıklamasını takip eden nesne - AS2 ile
Yazıyı Oku

Fare tıklamasını takip eden nesne - AS2 ile

Menu