Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css] ulozenie elementow
Forum PHP.pl > Forum > Przedszkole
taktak
Witam. Ogolnie z cssem nie mam wiekszych problemow ale czegos takiego jeszcze nie robilem i nie mam pojecia jak to zrobic a byc moze jest to bardzo proste wiec prosze o pomoc. Mam 2 obrazki dla przykladu.

Pierwszy (to co mi ciagle wychodzi):


Drugi (taki efekt chce uzyskac):


Obrazki sa roznej wysokosci i zawsze div ustawia sie na wysokosc najwyzszego obrazka a jak podciagnac te nizsze do tych gornych? Gdyby bylo kilka stalych obrazkow to bym zminusowal marginesy i to ulozyl ale wszystko leci w petli i nie ma takiej mozliwosci.
jankes83
http://masonry.desandro.com/
taktak
Dzieki, o to chodzilo ale ze tak powiem to niezla armata jak na ulozenie paru obrazkow. Nie da sie tego zrobic tylko za pomoca cssa?
jankes83
Jeśli znasz liczbę kolumn to możesz rozmieścić te obrazki w kolumnach. Masz na przykład 20 obrazków i 3 kolumny. Czyli robisz sobie $naKolumne = ceil(20/3) i wrzucasz w kazda kolumne tyle obrazków ile masz w zmiennej $naKolumne. Za pomocą samego CSSa chyba nie da się tego zrobić.
taktak
no tak to jest pomysl ale jak wyswietlic 3 kolumny skoro wszystko leci w jednej petli? Nie moge przeciez dac 3 divow bo wyniki beda sie powtarzac...
b4rt3kk
Załóżmy, że masz 10 obrazków, dzielisz te liczbę na 3 i już wiesz po ile obrazków wpakować do jednego diva. Tyle że skoro img mają różne wysokości to może to źle wyglądać, więc mógłbyś ich wysokość odczytywać i sumę wysokości podzielić na 3 (zresztą sam się baw w znalezienie optymalnego sposobu). Ale tak z grubsza:

  1. $liczba_obrazkow = 10;
  2. $po_ile_na_div = floor($liczba_obrazkow / 3);
  3.  
  4. for ($i=0; $i<$liczba_obrazkow; $i++) {
  5. if ($i % $po_ile_na_div == 0) {
  6. echo '<div>';
  7. }
  8. echo '<img>';
  9. if ($i % $po_ile_na_div == 0) {
  10. echo '</div>';
  11. }
  12. }

taktak
No tak kombinowalem w nocy ale juz bylo pozno i nie moglem se poradzic z tymi warunkami heh. Teraz juz mam gotowe jednak musialem troche zmodyfikowac zamykanie diva bo nie dzialalo.

  1.  
  2. if ($i % 3 == 2) // 2 zeby nie zamykalo po pierwszym rekordzie
  3. {
  4. ?>
  5. </div>
  6.  
  7. <?php
  8. }
  9.  
  10. if(mysql_num_rows($checkPhoto) == $i + 1) //kolejny warunek aby zamykal diva gdy liczba rekordow to np.7
  11. {
  12. ?>
  13. </div>
  14. <?php
  15. }


Jesli chodzi o liczbe kolumn i zdjec w kolumnach to ustalam na sztywno bo i tak wszystko bedzie stronnicowane. Szczerze mowiac to myslalem ze moze jakims cwanym trickiem da sie to zrobic samym css, szkoda ze nie...

Dzieki za pomoc, niestety nie moge kliknac pomogl ale jak napiszecie do modera to napewno wam obu przyzna po punkciku;)
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.