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

Ocak 15, 2014

profesyonel wordpress tema

Profesyonel Wordpress Temalar

%100 Türkçe, Responsive, Kaliteli Wordpress Temalar
-
Woocommerce Eklentileri

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..