Yazı içeriğini Kutu Şeklinde Yan Yana dizme Css

Yazı içeriğini Kutu Şeklinde Yan Yana dizme Css
31 Mayıs 2014 tarihinde eklendi, 621 kez okundu.

icerik-kutu

İnternet siteleri ile uğraşan web master arkadaşların ürün tanıtımı ve benzeri sitelerde içerik ve resimleri yan yana dizmek istemelerini daha kolay bir şekilde yapabilecekleri css kodlarını sayfamızdan bulabilirsiniz. Sitelerin daha hızlı açması yanı sıra şık görünüme sahip olmasını sağlayacak olan kutucukların nasıl yapıldığını sayfamızdan öğrenebilirsiniz.

Alt kısımda yer alan kodları css alanına ekliyorsunuz.

.kutu {
float:left;
margin:5px;
width:225px;
height:150px;
border:1px solid #CCC;
}

Yukarıda yer alan kodların anlamları şu şekildedir.
float:left; bu satırımız kutuları sola yaslayarak yan yana dizilmesini sağlıyor.
margin:10px; kutunun dışında dört bir tarafta 5px kadar bir boşluk bırakarak kutuların yan yana yapışık görünmesini engelliyoruz.
width:200px; genişlik değerimiz.
height:150px; yükseklik değerimiz.
border:1px solid #CCC; Kutumuzun dışına 1px kalınlığında çizgi şeklinde gri renkli bir kenarlık oluşturuyoruz.

Daha sonra alt kısımda yer alan kodu alt alta ekliyoruz ve yan yana oluşan kutucuların içerisine yazı ve resimlerimizi koyuyoruz.

Kod:
1
<div class="kutu">içerik buraya</div>
Yorumlar

Henüz yorum yapılmamış.

Sayfa başına git