DIV'leri yan yana yerleştirmek

Bu makalemizde DIV'lerimizi yan yana yerleştireceğiz.

Merhabalar.

DIV tasarımında karşılaşılan en büyük sorunlardan birisi de yaptığınız DIV'leri yan yana yerleştirmektir. Bu sorunun çözümü çok basit. Makalemizde inceleyelim.

Bu makalemizde DIV'lerimizi yan yana yerleştireceğiz.

Küçük bir not düşmekte fayda var; Bu yan yana sıralama işleminde öncelikle bir ana div olacak ve içine yerleştireceğimiz ana divin boyutunu aşmayacak şekilde divler olacak. Örnekte daha iyi anlayacağız.

HTML

<!--#Ana Div Baslangic-->
<div id="ana_div">
    
    <div class="div" id="div">Mert Hiçyılmaz - 1.Div</div>
    <div class="div" id="div2">Mert Hiçyılmaz - 2.Div</div>
    <div class="div" id="div3">Mert Hiçyılmaz - 3.Div</div>

</div>
<!--#Ana Div Bitis-->

 

CSS

#ana_div {
    
    height: 300px;
    width: 960px;
    margin-right: auto;
    margin-left: auto;
    background-color: #666;
    
}

.div {
    
    float: left;
    display: inline-block;
    height: 200px;
    width: 300px;
    margin: 10px;
    color: #FFF;

}

 

Sonuç:

Dikkat ederseniz .div stilimizde float yani yerleşimi sola doğru yaptık ve bu sebeple yan yana sıralanmış oldular.

Not: Uygulamalı olarak çalışırsanız daha faydalı olacağını düşünüyorum.

Mert Hiçyılmaz
1995 doğumlu. Bilgisayar ve Güvenlik Sistemleri üzerine bir firmada teknisyen olarak çalışmaktayım. Ayrıca geliştirilmekte olan bir restoran pos sisteminin de kurulum ve bakımlarını yapmaktayım. CCTV, Uzak mesafe internet aktarımı, bilgisayar yazılımsal ve donanımsal sorunlar gibi konularda çalışmaktayım. Bölgemizde ki çok sayıda büyük markanın teknik destek ve kurulum hizmetlerini sağlamaktayım.
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Başarılı anlatım teşekkürler..
Merhaba, Evet div'ler bir güzel yanyana dizildi de ondan sonra eklediğim yapılar yamuluyor.Misal sizin yukarda yazdığınız anaDiv'in dışına bir tane daha div ekliyorum;ancak abuk bir şekil alıyor ve div'ler içiçe dolanıyor.Sorun ne acaba? Son eklediğim div'e herhangi bir stil vermiyorum.Yardımcı olursanız sevinirim. İyi çalışmalar...
diğer kodlara da bakmak lazım,mert@merthicyilmaz.net adresime yaptığınız çalışmayı kodlarıyla birlikte gönderirseniz daha iyi yardımcı olabilirim.İlginize teşekkürler
Merhaba, Başka arkadaşlara da bilgi olması açısından buraya da ekliyorum. Aslında pek birşey yapmadım.Kodlar aşağıdaki gibi: [code]<div id="main" class="dvMain"> <div id="d1" class="dv"> Div 1 Alanı </div> <div id="d2" class="dv"> Div 2 Alanı </div> <div id="d3" class="dv"> Div 3 Alanı </div> </div> <br /><br /> <div> Div 4 alanı </div>[/code] .CSS(stiller) [code].dvMain { width:300px; } .dv { float: left; width: 100px; background-color: Red; height: 100px; }[/code] Div 4 de diğerlerinin yanında çıkıyor.
mail adresinize cevabı yollamıştım
merhabalar, yardım ederseniz ya da ivbir fikri olan varsa dua ederim. sorun şu; bir ana divin içine üç dört tane divi sıralamak istiyorum. ama bu divlerin css leri farklı olsun istiyorum. üç tane divi iki css vererek sıralayabiliyorum ilk iki dive bir css diğer dive başka css ama ben divlerimin hepsini farklı boyutlarda yan yana sıralamak istiyorum. Şimdiden çook teşekkür ederim.
iş tamam arkadaşlar çözdüm probelmi: #deneme{ width:900px; height:200px; margin-left:auto; margin-right:auto; } #sol{ width:100px; height:100px; float:left; margin-left:5px; margin-right:5px; } #orta{ width:100px; height:100px; float:right; margin-left:5px; margin-right:5px; } #sag{ width:100px; height:100px; float:right; margin-left:5px; margin-right:5px; } <div id="deneme"> <div id="sol">isbamed</div> <div id="orta">bakır</div> <div id="sag">deneme</div>
Eğer Dreamweawer kullanıyorsanız float yaptığınız CSS menüsünden floatı yaptığınız divin altına veya üstüne (çalışmanıza göre) boş bir div daha ekleyip CSS menüsünden Clear seçeneğini seçerseniz sonraki divleriniz etkilenmeyecektir.

Yukarı Git