Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: 3 komórki takiej samej dlugosci?
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
1010
mam trzy komórki (div). Leża one jedna obok drugiej. I chciałbym aby ich wysokość była zawsze równa i rozciągała się wraz z zawartością najpełniejszej z nich... Czy takie coś jest mozliwe?
barat
Odwieczny problem CSS ... niby jest coś takiego jak display:table i display:cell , jednak nie działa to tak jak powinno ...

Jednym ze sposobów jest wsadzenie tych 3 divów w jeden kontener, a dla kontenera ustawić background-image z repeat-y (cieniutki pasek) by rysowało kolumny , wtedy każda z tych divów rozciągnie kontener który stworzy wrażenie, że pozostałe komórki też się zwiększyły.

Gdzieś też widziałem rozwiazanie z javascriptem, że brało by ID , wybierało najwyższy i pozostałym ustawiało takie samo , ale wtedy jak nie ma JS to pozamiatane smile.gif
revyag
Można divom ustawić też duż padding i minusowy margin tej samej wartości.
np.
Kod
div#wrap {
    height:100%;
    overflow:hidden;
}
div.col {
    float:left;
    width:200px;
    padding-bottom:2000px;
    margin-bottom:-2000px;
}

  1. <div id="wrap">
  2. <div class="col"></div>
  3. <div class="col"></div>
  4. <div class="col"></div>
  5. </div>
1010
Cytat(barat @ 17.08.2007, 12:53:03 ) *
Jednym ze sposobów jest wsadzenie tych 3 divów w jeden kontener, a dla kontenera ustawić background-image z repeat-y (cieniutki pasek) by rysowało kolumny , wtedy każda z tych divów rozciągnie kontener który stworzy wrażenie, że pozostałe komórki też się zwiększyły.

Ten sposób wykorzystałem... Całkiem fajny... Nie wpadłem na to
barat
Bardzo powszechny sposób smile.gif

To jest tzw faux columns smile.gif

http://www.alistapart.com/articles/fauxcolumns/

alistapart - polecam smile.gif

Sposób jaki podał Kreton też już kiedyś czytałem ... ale tam jest jedno mądre zdanie :

"ważne jest też dopasowanie metody do skali efektu końcowego."

Do prostych układów faux columns sprawdza się wyśmienicie smile.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.