Css kutu modeli örneği ve float

14.11.2017
ilketkinlik
4110

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

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;   }