• 10-06-2014, 04:30:32
    #1
    Merhaba. Fotoğraf sitem için Pinterest tarzı bir tasarım düzenliyorum. Oluşturduğum div'ler otomatik sıralanırken bazıları ikiye bölünüyor. Bütün kodları elden geçirdim çözemedim yardımcı olursanız sevinirim.

    <div class="container">
      <div id="columns">
        <div class="span3">
          <div class="image-galery">
              <img src="resim-url" />
           </div>
           <div class="tags-galery">#<a href="link">başlık</a></div>
        </div>
    ..
    ...
    ....
    .....
    ......
      </div>
    </div>
    #columns {
        -webkit-column-count: 5;
        -moz-column-count: 5;
        column-count: 5;
    }
    .container {
        width: 1170px;
    }
    .span3 {
        margin:5px;
        width: 220px;
        opacity:0.7;
    }
    .image-galery{
        border: 1px solid #fafafa;
        width: 90%;
        margin: 20px auto;
    }
    
    .image-galery img{
        width:100%;
    }
    .tags-galery{
        text-align:center;
        width: 90%;
        margin: 0 auto 10px auto;
    }
    
    .tags-galery a{
        text-decoration:none;
    }
    
    .tags-galery a:hover{
        color: #555;
        text-decoration:underline;
    }
    Ekran görüntüsü şöyle oluyor


    Abdullah Gül'ün fotoğrafın altında olması gereken taglar sağ tarafta yukardan devam ediyor. span3 ü bölmeden otomatik sıralama yapılmasını istiyorum.
  • 10-06-2014, 17:41:30
    #2
    span3 için display:inline değeri verilirse ne olur acaba merak ettim..
    veya
    span3 içine, içindeki diğerlerini kapsayacak bir div ekleyin, o div için de display:block değeri verin..
    veya
    span3 için bir yükseklik değeri verirseniz olur mu acaba?

    bakalım tahminlerimden biri tutacak mı : )
  • 10-06-2014, 20:02:44
    #3
    sadeeq adlı üyeden alıntı: mesajı görüntüle
    span3 için display:inline değeri verilirse ne olur acaba merak ettim..
    veya
    span3 içine, içindeki diğerlerini kapsayacak bir div ekleyin, o div için de display:block değeri verin..
    veya
    span3 için bir yükseklik değeri verirseniz olur mu acaba?

    bakalım tahminlerimden biri tutacak mı : )
    Öncelikle teşekkür ederim zaman ayırdığınız için.
    span3 kodlarına display:inline ekledim fakat değişen bişey olmadı.
    Diğerlerini kapsayacak div ekleyip display:block yaptım yine değişen bişey olmadı.
    Yükseklik değeri verdim değişen bişey oldu ama yine istediğim gibi olmadı bölünüyor her şekilde.

    Şöyle bir çözüm ürettim;
    <div class="tags-galery">#<a href="link">başlık</a></div>
    kodunu resmin içinde olduğu divin içine attım.
    Resim divine position:relative, tag divine position:absolute verdim. Bu şekilde bölünmüyor. Biraz tasarım dokunuşundan sonra istediğim ayara gelecek muhtemelen.

    Daha kolay yada kullanışlı önerisi olan varsa paylaşsın lütfen.
  • 11-06-2014, 16:19:20
    #4
    sanırım container divinden kaynaklı,
    sol taraftaki divin ne olduğunu bilmiyorum ama yükseklik sınırına ulaştığı için, ve sol, container ile sağ taraftaki divler inline olduğu için (tahminimce), container sola yılışıyor.. container için
    min-height:600px veya 800px falan bir değer vermeyi deneyin
  • 14-06-2014, 17:44:10
    #5
    sadeeq adlı üyeden alıntı: mesajı görüntüle
    sanırım container divinden kaynaklı,
    sol taraftaki divin ne olduğunu bilmiyorum ama yükseklik sınırına ulaştığı için, ve sol, container ile sağ taraftaki divler inline olduğu için (tahminimce), container sola yılışıyor.. container için
    min-height:600px veya 800px falan bir değer vermeyi deneyin
    Yardımınız için teşekkür ederim. 3 gün araştırdıktan sonra css ile boşa uğraştığımı fark ettim. jQuery ile gayet basit bir kullanımı var. columnizer diye geçmekte. ihtiyacı olan varsa tıklasın.