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
Asp.net ile basit kullanıcı ekleme, listeleme, silme ve güncelleme
Yazıyı Oku

Asp.net ile basit kullanıcı ekleme, listeleme, silme ve güncelleme

Nesne tabanlı programlama uygulamaları (try - catch - finally)
Yazıyı Oku

Nesne tabanlı programlama uygulamaları (try - catch - finally)

Asp.net ile veritabanına bağlanma ve basit kayıt ekleme, listeleme, silme, güncelleme
Yazıyı Oku

Asp.net ile veritabanına bağlanma ve basit kayıt ekleme, listeleme, silme, güncelleme

İnternet programcılığı çerez (cookie), oturum yönetimi (session) ve grafik uygulamaları
Yazıyı Oku

İnternet programcılığı çerez (cookie), oturum yönetimi (session) ve grafik uygulamaları

Css ile web sayfası tasarımı örneği yapımı
Yazıyı Oku

Css ile web sayfası tasarımı örneği yapımı

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

Menu