Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: auto height dla każdej komórki w tabelce
Forum PHP.pl > Forum > Po stronie przeglądarki
mb83
Witam,
Czy da się uzyskać dynamiczny height dla każdej komórki w tabeli?
Chodzi o taki efekt:
Tabelka to dwie kolumny, przy czym każda komórka to inny height w zależności od ilości tekstu w niej.

Tutaj jest próbka jak ma wyglądać ale chodzi o to aby "komórka 2" i "komórka 3" były takiej wysokości jak tekst a nie dostosowały się do wysokości komórek 1 i 4.
http://jsfiddle.net/pem579vq/

Da się to jakoś ogarnąć?


Pewnie rozwiązanie jest błahe, upały dają się we znaki i brak myślenia w CSS:-)
trueblue
Może tak:
http://jsfiddle.net/pem579vq/1/
mb83
super, a czy da się aby komórka 4 była zaraz pod drugą? Bez tego paddingu.

ogólnie chodzi o to aby każda kolejna była z różnym height (tak jak teraz) i w równym odstępie pomiędzy sobą.
trueblue
Czyli tak:
http://jsfiddle.net/gabrieleromanato/tQANc/
Szukaj w Google pod hasłem: masonry
mb83
dokładnie.
a da się to jakoś w wersji na tabelki przerobić? albo jest już coś takiego ale w table?
trueblue
Nie, tabelka to tabelka.
mb83
jeszcze jedno w temacie.
masonry układa w formacie:
  1. tab1 tab5
  2. tab2 tab6
  3. tab3 tab7
  4. tab4 ...


da się żeby układał tak:
  1. tab1 tab2
  2. tab3 tab4
  3. tab5 tab6
  4. tab7 ...


questionmark.gif

ponawiam post.
aktualnie kod, który mi w zupełności odpowiada to coś takiego:
  1. .wrapper {
  2. width: 100%;
  3. margin: 1em auto;
  4. }
  5.  
  6. .masonry {
  7. padding: 0;
  8. -moz-column-gap: 5px;
  9. -webkit-column-gap: 5px;
  10. column-gap: 5px;
  11. line-height: 18px;
  12. }
  13.  
  14. .item {
  15. display: inline-block;
  16. background: #fff;
  17. padding: 5px;
  18. margin: 1px;
  19. width: 100%;
  20. box-sizing: border-box;
  21. -moz-box-sizing: border-box;
  22. -webkit-box-sizing: border-box;
  23. border: 1px solid #3b5998;
  24. }
  25. .item:hover {
  26. background-color: #ffc;
  27. cursor: pointer;
  28. }
  29.  
  30.  
  31. .masonry div.e {
  32. display: block;}
  33.  
  34. @media only screen and (min-width: 690px) {
  35. .masonry {
  36. -moz-column-count: 2;
  37. -webkit-column-count: 2;
  38. column-count: 2;
  39. }
  40. }


tylko czy jest możliwość aby item'y układały się od lewej do prawej a nie od góry do doły (tak jak post wyżej)?
Pomoże ktoś?
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.