Inline-Block Özelliği ile Divleri Yan Yana Yerleştirme
Önceki sayfamızda div ve li gibi etiketleri float kullanarak yerleştirmekten bahsetmiştik.
Bu konumuzda ise aynı işi float ve clear kullanmadan yapacağız.
Aşağıdaki gibi oluşturulan div etiketlerinin alt alta yerleşeceğinden bahsetmiştik.
<body>
<div id="anaKatman">
<div id="ustKatman">Başlık vb</div>
<div id="solKatman">Linklerimiz</div>
<div id="ortaKatman">İçerik 1</div>
<div id="sagKatman">İçerik 2</div>
<div id="altKatman">Alt Bilgi</div>
</div>
</body>
Yukarıdaki örnekte solKatman, ortaKatman ve sagKatman isimli kutuların yan yana yerleşmeleri istenmektedir. Bunun için bu üç kutuya
özelliği uygulayabiliriz.
Display özelliği inline-block yapılan elemanlar;
-
inline elemanlar gibi yan yana yerleşebilirler.
-
blok elemanlar gibi genişlik, yükseklik, margin vb değerler uygulanabilirler.
#solKatman, #ortaKatman, #sagKatman
{
display: inline-block;
}
Görüldüğü gibi bu yöntemle divleri kolayca yan yana yerleştirmek mümkün. Ayrıca clear:both uygulanmış boş bir div kullanmamıza gerek kalmaz.
Ancak bu yöntemde de dikkat edilmesi gereken bazı noktalar var.
Dikkat Edilmesi Gerekenler:
Yan yana yerleştirilen div elemanlarının toplam kapladığı yer, ana katmanın width değerinden daha fazla olursa yan yana sığmayacaklardır. Bu durumda en sondaki div alta kayar ve yerleşim bozulur.
Yan yana gelen div elemanları arasına (artık satır içi eleman olduklarından) otomatikman bir boşluk bırakılacaktır. Bu da o divlerin hesapladığımızdan daha fazla yer kaplamasına ve kaymasına neden olacaktır. Bu durum farklı yöntemler ile aşılabilir. En kolayı kapanan div ile açılan div etiketi arasına hiç boşluk bırakmamaktır:
<div id="solKatman">
Linklerimiz
</div><div id="ortaKatman">
İçerik 1
</div><div id="sagKatman">
çerik 2</div>
Yukarıdaki gibi yazıldığında divler arasına boşluk konmayacak ve genişlik hesabımız doğru sonuç verecektir.
Divlerin toplam kapladığı yer hesaplanırken, margin, padding ve border değerleri de hesaplanmalıdır. (bkz Css Kutu Modeli)
Bir başka sorun da yan yana yerleştirilen div elemanlarının içerikleri farklı olacak, bu durumda yükseklikleri de farklı olacaktır. İşte o zaman ortaya çıkan dikey hizalama problemini vertical-align kullanarak aşabiliriz.
#solKatman, #ortaKatman, #sagKatman
{
display: inline-block;
vertical-align: top;
}
Vertical-align özelliğine top değeri verildiğinde kutular üst noktalarına göre hizalanır. Bottom değeri alt noktalarına, middle değeri ise orta noktalarına göre hizalanmalarını sağlar.
Tablosuz Tasarım ile İlgili Diğer Sayfalar:
1. Tablosuz Tasarım ve Div Elemanı
2. Float Özelliği ile Divleri Yan Yana Yerleştirme
3. Inline-Block Özelliği ile Divleri Yan Yana Yerleştirme
inline-block divler alta kayıyor, genişlik fazla geliyor ve sığmıyor, inline block boşluk problemi, inline block kullanarak divleri li etiketlerini yan yana yerleştirme
KONU İLE İLGİLİ ÖRNEKLER
|
Inline-block özelliği ile divleri yan yana yerleştirme
|
Kendin Dene
|
Kendin Dene butonuna tıklayarak örneğin kodlarına ulaşabilir ve değişiklikler yaparak sonucu görebilirsin.
11110 kez okundu.