[css] ulozenie elementow Opcje

[-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:

[PHP] pobierz, plaintext 
$liczba_obrazkow = 10;
$po_ile_na_div = floor($liczba_obrazkow / 3);
 
for ($i=0; $i<$liczba_obrazkow; $i++) {
  if ($i % $po_ile_na_div == 0) {
    echo '<div>';
  }
  echo '<img>';
  if ($i % $po_ile_na_div == 0) {
    echo '</div>';
  }
}
[PHP] pobierz, plaintext 

[-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.

[PHP] pobierz, plaintext 
 
if ($i % 3 == 2) // 2 zeby nie zamykalo po pierwszym rekordzie
{
?>
     </div>
 
<?php
}
 
if(mysql_num_rows($checkPhoto) == $i + 1) //kolejny warunek aby zamykal diva gdy liczba rekordow to np.7
{
?>
	</div>
<?php
}
[PHP] pobierz, plaintext 

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;)