0
Kayıt Ol

CSS'de 2'den fazla objeyi yanyana sıralama

9

●

185

  • 14-09-2013, 02:32:31
    #1
    metehanx
    metehanx
    Üyeliği durduruldu
    Merhabalar

    Başlıkta tam açıklayamadım fakat genel olarak çözemediğim bir css problemi var.

    2'den fazla objeyi yanyana sıraladığımda (örneğin 8) bunu marginsiz ve paddingsiz yapmak istiyorum. Marginli ve paddingli yapınca en sağ veya en sol tarafında objenin boşluk oluşuyor. Yani objeler en sağa ve en sola dayalı olmalı. Objelere margin right verdiğimde sağda, margin left verdiğimde solda boşluk olacak biliyorsunuz. Türlü ortalama yöntemleri denedim ama hiç biri adam akıllı isteğimi karşılamadı. 1 piksel dahi boşluk olmasın istiyorum en sağda ve en solda.

    Aklıma gelen diğer bir şey ise en sondaki objenin divini farklı yapmak oldu fakat onda da sürekli bir değişken mevcut yani en sondaki divi de farklı yapamıyorum.
  • 14-09-2013, 02:46:40
    #2
    sewakldawk
    sewakldawk
    ID'si "wrapper" olan bir diviniz var diyelim.
    Bunun altında da sınıfı "yanyanadiz" olan birden çok div. Bunları yan yana dizeceksiniz.
    4'er tane diziyorsanız örneğin, her 4 taneden sonra bir adet 
    <div class="clear"></div>
    tagı ekleyin.

    Yine right margin verin. CSS olarak da şunu ekleyin;

    .clear { clear: both; }
.yanyanadiz:last-child { margin-right: 0 !important; }
  • 14-09-2013, 02:47:15
    #3
    KIZILKAN
    KIZILKAN
    Merhaba ; anladığım şekilde yorumlayacağım.Hata olursa kusura bakmayın.

    Alıntı
    ul.a{float:left;margin-left:-5px};
    ul.a li{float:left;margin-left:5px}
    Yani özetle nesneler yan yana sıralanacak ve en başta -5px atıcak.Bu şekilde boşluksuz sıralama olabilecek saygılar.
  • 14-09-2013, 03:21:03
    #4
    metehanx
    metehanx
    Üyeliği durduruldu
    sewakldawk adlı üyeden alıntı: mesajı görüntüle
    ID'si "wrapper" olan bir diviniz var diyelim.
    Bunun altında da sınıfı "yanyanadiz" olan birden çok div. Bunları yan yana dizeceksiniz.
    4'er tane diziyorsanız örneğin, her 4 taneden sonra bir adet 
    <div class="clear"></div>
    tagı ekleyin.

    Yine right margin verin. CSS olarak da şunu ekleyin;

    .clear { clear: both; }
.yanyanadiz:last-child { margin-right: 0 !important; }
    Ayrı ayrı değil php kodu dinamik olarak çekiyor yani aralarına clear eklemem mümkün değil.
  • 14-09-2013, 03:27:33
    #5
    sewakldawk
    sewakldawk
    Mümkün hocam. Foreach ile döndürüyorsanız;
    $c = 0;
foreach($ornek as $veri) {
$c++;
 echo '<div class="yanyanadiz"></div>';
if ($c == 4) echo '<div class="clear"></div>';
}
  • 14-09-2013, 03:33:27
    #6
    metehanx
    metehanx
    Üyeliği durduruldu
    sewakldawk adlı üyeden alıntı: mesajı görüntüle
    Mümkün hocam. Foreach ile döndürüyorsanız;
    $c = 0;
foreach($ornek as $veri) {
$c++;
 echo '<div class="yanyanadiz"></div>';
if ($c == 4) echo '<div class="clear"></div>';
}
    Teşekkürler. Tamamdır.
  • 14-09-2013, 03:53:10
    #7
    sewakldawk
    sewakldawk
    Ufak bir şey unutmuşum, kusura bakmayın 

    $c = 0; 
foreach($ornek as $veri) { 
  $c++; 
  echo '<div class="yanyanadiz"></div>'; 
  if ($c == 4) { echo '<div class="clear"></div>'; $c = 0; }
}
  • 14-09-2013, 09:09:21
    #8
    emirhanguven
    emirhanguven 
    <html>
<style type="text/css">
	.item {
		width:250px; height:250px;
		background-color:#CCC;
		display:inline-block;
	}
</style>
<body>
	<div class="item">a</div>
	<div class="item">b</div>
	<div class="item">c</div>
</body>
</html>
    sanırım istediğin bu
  • 14-09-2013, 20:32:36
    #9
    metehanx
    metehanx
    Üyeliği durduruldu
    emirhanguven adlı üyeden alıntı: mesajı görüntüle 
    <html>
<style type="text/css">
	.item {
		width:250px; height:250px;
		background-color:#CCC;
		display:inline-block;
	}
</style>
<body>
	<div class="item">a</div>
	<div class="item">b</div>
	<div class="item">c</div>
</body>
</html>
    sanırım istediğin bu
    Teşekkürler bunu da deneyeceğim.