Yan Yana Sıralı Divler İlk ve Son Div ‘i Kenarlara Yaslama

Ocak 15, 2014

Div ‘i Kenarlara Yaslama

Web tasarımcıların genellikle kullanmadığı yada bilmediği bir css özelliğinden bahsedeceğim bu makalede. Umarım başlık açıklayıcı olmuştur. Yani yan yana sıralı 3 div’in ilk ve son divlerini sola ve sağa yaslama işlemini kastediyorum.

block

Üstteki resimde gördüğünüz gibi genel kapsayıcı bir div içine aynı divleri yan yana 3 sıra halinde listeleyip ilk ve son divlerin sola ve sağa yaslanmasını sağlayacağız.

İlk olarak container ismindeki genel kapsayıcı div içine  kutularımızı /** <ul> < li> **/ tagları olarak ekliyoruz;

/**

<div class=”container”>

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

</div>

 

**/

Daha sonra Css kodlarımızı aşağıdaki şekilde oluşturuyoruz;

/**

#catproduct ul, li {
padding : 0;
margin : 0;
list-style-type : none;
}
#catproduct ul {
width : 340px;
background-color : #eee;
height : 1000px;
}
#catproduct ul li {
float : left;
width : 100px;
height : 100px;
background-color : #ccc;
margin : 10px;
}
#catproduct ul li:nth-child(3n+1) {
margin-left : 0;
}
#catproduct ul li:nth-child(3n) {
margin-right : 0;
}

**/

Tüm işlem  bu kadar !

Sizin yan yana listeliyeceğiniz divlerin sayısı farklılık gösterebilir, css kodlarından son 2 satırdaki ” 3n ” değerlerini kendinize göre düzenlemeyi unutmayın. Umarım işinize yarar bir yazı olmuştur, herhangi nedenle yapamayan arkadaşlar olursa yorum atarsa yardımcı olamaya çalışırım, görüşmek üzere..

0
Connecting
Please wait...
Mesaj Gönder

Canlı destek şuan aktif değil bize mesaj atabilirsiniz. Ortalama 60 DK içerisinde dönüş sağlanacaktır

Adınız Soyadınız
* E-Posta
* Mesajınız
Sohbet

Merhaba, size nasıl yardımcı olabilirim?

Adınız Soyadınız
* E-Posta
* Sorunuz
Sohbet
Geri Dönüş

Destekle ilgili geri dönüşlerinizi bekliyoruz.

Sorunuzu Çözmeden Yardımcı Oldu mu?