[CSS][HTML] UKŁADANIE JAK NA OBRAZKU Opcje

[Gray]

Witam, poniżej przedstawiam obrazek układających się DIVów:

(IMG:http://img11.imageshack.us/img11/1224/przykladpf.png)

I mam pytanie, jak najprościej uzyskać taki efekt? Aby obrazki ustawiały się od lewej do prawej. Ustawię im jednakową szerokość ale różne wysokości, i chciał bym aby kolejne rzędy obrazków układały się tak jak to pokazałem na grafice, uzupełniając wolną przestrzeń pod poprzednimi. Chciał bym zaznaczyć, że na obrazku przykładowo narysowałem 4 kolumny, jednak będzie ich więcej lub mniej, w zależności od szerokości monitora. Mam nadzieję, że w miarę jasno to opisałem :/

Pozdrawiam,
Gray

Ten post edytował Gray 19.02.2012, 20:47:46

[Crozin]

Jeden element obejmujący całość, w nim cztery kolejne (kolumny). Następnie w każdej kolumnie wyświetlasz co 4-ty element: http://jsfiddle.net/PsDjD/

[Gray]

Hmmm. Chyba nie będę mógł zastosować Twojej metody, gdyż nie zawsze tych kolumn będzie 4. W zależności od szerokości monitora, chcę to zrobić tak aby kolumn było więcej lub mniej. Sprawdza się tutaj ustawienie DIVów inline-block, lub float: left, jednak nie uzupełniają one wolnych przestrzeni pod sobą...

Ten post edytował Gray 19.02.2012, 20:39:19

[IceManSpy]

Może podpatrz jak jest zrobiona ta skróka w wordpressie:
http://www.tripleships.com/
Nazywa się tanzaku.

[lobopol]

To co podał IceManSpy to jest ta wtyczka: http://blog.xlune.com/2009/09/vgrid/

[Gray]

Mechanizm tej skórki wordpressa wygląda mi na troszkę bardziej skomplikowany, niż ten na który miałem nadzieję (IMG:style_emoticons/default/biggrin.gif) Mój stopień wtajemniczenia może tego nie ogarnąć, ale to jest dobry przykład jak mniej więcej miało by to wyglądać. Tutaj znalazłem tą skórkę razem z downloadem i demówką: http://wordpress.org/extend/themes/tanzaku

#edit:

@lobopol - właśnie tego się obawiałem... że to będą js itd.

Może ktoś zaoferuje łatwiejsze rozwiązanie? bez bajerów przelotu okienek itd. (IMG:style_emoticons/default/biggrin.gif)

Ten post edytował Gray 19.02.2012, 21:03:03

[lobopol]

Wybitnie skomplikowane to nie jest dołączenie wtyczki i

[JAVASCRIPT] pobierz, plaintext 
$(function(){
 
	$("#grid-content").vgrid();
 
});
 
[JAVASCRIPT] pobierz, plaintext 

Bez js, nie masz jak tego zrobić no chyba że chcesz naprawdę natworzyć zagmatwanego kodu php+html+css

Ten post edytował lobopol 19.02.2012, 21:05:59

[Gray]

hmm, musiał bym spróbować, czy cokolwiek z tego ruszę... nie bez powodu napisałem ten temat w "przedszkolu" (IMG:style_emoticons/default/smile.gif) A czy istnieje jakaś strona z tym pluginem itd. która by nie była w języku japońskim?

[lobopol]

Szczerze to wątpię bo ten plugin napisał japończyk. Użyj google translate, ale same przykłady są wystarczające.

[Gray]

A gdzie te przykłady mogę pobrać?

[lobopol]

http://blog.xlune.com/2009/09/vgrid/ (IMG:style_emoticons/default/questionmark.gif)