Çok sütunlu görüntüleme için divlere dinamik boyutlandırma / konumlandırma

5 Cevap php

Setup

Ben RSS beslemeleri çizer ve sayfada onları görüntüleyen bir web sitesi var. Katları birbirine yanında görünür böylece Şu anda, ben, her besleme içeren divlere yüzdeleri kullanın.

Ancak, sadece birbirine iki yanında, ve pencere yeniden boyutlandırır eğer ekranda bazı çirkin boşluk olabilir.

Desire

Ben yapabilmek istiyorum, ama henüz bir yolunu çözemedim ne, doğrusal sayfanın içine tüm beslemeleri koymak ve sahip olmaktır:

  • bir 'pre-built' multicolumn görünümü nerede sütunlar halinde beslemeleri istiyorum "denge" kendilerini

hangi beni götürür:

  • sütun sayısı ekran şu anda ne kadar geniş bağlı olarak değişir \

Bu kelime işlem uygulamaları sütunlu düzenleri nasıl ele benzer.

Question

Ben AJAXy mutluluk çeşit uygulamak gerekir varsayıyorum, ancak şu anda Javascript hakkında çok az şey biliyoruz.

just CSS / HTML / PHP ile bunu yapmak için bir yolu var mı?

Eğer değilse, nasıl bu çözme konusunda gitmeli?


final solution:

(@warpr 's ve @joh6nn' nin cevapları dayalı)

#rss
        {min-width: 10em;
        max-width: 25em;
        min-height: 15em;
        max-height: 25em;
        font-size: .97em;
        float: left;
        }

5 Cevap

Muhtemelen sadece CSS / HTML ile istediğini elde edemez, ama sen biraz yakın alabilirsiniz.

Ben bir fotoğraf albümü için kullanılan bir hile şudur:

  1. Her besleme sabit bir genişliğe sahip olduğundan emin olun, ben '20em gibi bir şey 'tavsiye ederim;
  2. Her besleme aynı yüksekliğe sahip olduğundan emin olun.
  3. Bıraktığı her şeyi yüzer.

Her div onlar süzülüyor konum aynı ölçülere sahip, çünkü sol onlar tarayıcınızda uyacak sütun tam sayısı ile bir ızgara oluşturacak.

Aslında divs yüksekliğini düzeltmek ve içeriği klibi için CSS kullanabilirsiniz sürece, ben ne yaptığını, adım 2 için javascript ihtiyacınız olacak:

  1. Yüksek div bulma, her besleme div üzerinde yineleme.
  2. İlk adımda bulunan div maç yüksekliğini değiştirerek, tekrar her div üzerinde yineleme.

Bu uygulamak oldukça kolaydır, ama besbelli optimal değildir. Ben burada yayınlanan tüm iyi çözümler okumak için sabırsızlanıyoruz :)

Eğer listeleri ile bunu yapmak mümkün olabilir; Ben hiç denemedim, bu yüzden emin değilim.

Eğer liste öğeleri görüntülemek yaparsanız: inline, liste yerine dikey yatay olur. Bir içeren bir unsura listesini malzeme ve dolgu ve marjları ile keman eğer oradan, sen-çözgü hattına listesini almak mümkün olabilir, metin gibi: yine, bu yüzden ben değil, hiç denemedim biliyorum.

Bu tekniğin işe yararsa, bunu duymak çok ilgi duyarım.

Ben şimdi bir süre için jQuery için columnize eklenti kullanmak için bir bahane arıyordum var. Saf CSS / HTML sevinç değil, ama sizin için cevap tutun olabilir gibi görünüyor.

Check it out: http://www.systemantics.net/en/columnize

Şerefe!

-CF

Aklıma tek yönlü bir dinamik CSS ve javascript bir karışımıdır. Bir sütun (besleme) eklenir her zaman, her div (yüzde olarak) genişliğini yeniden yazmak için javascript kullanın.

jQuery kullanışlı buraya gelirdi.

var columns = $(".feed").size();
var size = 100/columns;
$(".feed").css("width",size+"%");

Birisi Yanılıyorsam beni düzeltin çekinmeyin. Benim jQuery biraz titrek.

Eğer AJAX kullanarak değilseniz tabii, PHP tamamen aynı çözümü uygulamak.

Ayrıca (eğer jQuery kütüphanesi gerekir) bu jQuery javascript kullanabilirsiniz.

var docwidth = $(document).width();
var numOfCollums = $('.feed').length;
var colWidth = docwidth/numOfCollums;
$('.feed').each( function() {
     $(this).width(colWidth);
});

Wich would set the collum width dynamicly. For this to work your collums should have the class 'feed'

EDIT: You should style your divs something like this:

.feed{
  float:left;
}

etiketler