Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML] UKŁADANIE JAK NA OBRAZKU
Forum PHP.pl > Forum > Przedszkole
Gray
Witam, poniżej przedstawiam obrazek układających się DIVów:



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
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ą...
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ę 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. biggrin.gif
lobopol
Wybitnie skomplikowane to nie jest dołączenie wtyczki i
[JAVASCRIPT] pobierz, plaintext
  1. $(function(){
  2.  
  3. $("#grid-content").vgrid();
  4.  
  5. });
  6.  
[JAVASCRIPT] pobierz, plaintext


Bez js, nie masz jak tego zrobić no chyba że chcesz naprawdę natworzyć zagmatwanego kodu php+html+css
Gray
hmm, musiał bym spróbować, czy cokolwiek z tego ruszę... nie bez powodu napisałem ten temat w "przedszkolu" 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/ questionmark.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.