• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Responsywna galeria

VPS Starter Arubacloud
0 głosów
1,781 wizyt
pytanie zadane 19 września 2017 w HTML i CSS przez wariacik Użytkownik (680 p.)
Witam

Chciałbym stworzyć galerie na stronie. Obecnie wyglada ona tak: https://zapodaj.net/b861f38f92a7c.png.html

Uzyłem juz lightboxa galeria fajnie działa. Chciałbym uzyskac taki efekt aby przy duzym oknie przegladarki miniaturki zdjec ukladaly sie po 3 jedno obok drugiego a wraz ze zmniejszaniem okna(i na mobilnych urzadzeniach) zdjecia ukladaly sie pojedynczo jedno pod drugim. Jakie rozwiązanie proponujecie? Umiescic kazde zdjecie w divie i do tego pakowac po 3 divy ze zdjeciami w jeszcze osobnego diva i wtedy w tych mniejszych ustawic float:left? Czy to raczej zly pomysł?

HTML I CSS mojej strony: https://jsfiddle.net/20u5vg0b/

3 odpowiedzi

0 głosów
odpowiedź 19 września 2017 przez Badiusz Obywatel (1,070 p.)

Możesz podejrzeć na stronie parafii, którą kiedyś zrobiłem. Nie jest może to szczyt marzeń i majstersztyk css'a i html'a, ale działa i każdy jest zadowolony. + Lightbox

strona <--

komentarz 19 września 2017 przez wariacik Użytkownik (680 p.)
Dokładnie o taki efekt chodzi tylko z wiekszym paddingiem. Czyli każde zdjęcie jest w osobnym divie tak? I uzyles float left  i co 3 zdjecie clear both zeby ustawic je obok siebie?
komentarz 19 września 2017 przez Badiusz Obywatel (1,070 p.)

Z tego co pamiętam to nie. Jak masz Diva 900px a zdjęcie 300px to jak dasz do wszystkich zdjęć float: left. to wszystkie powinny się ułożyć od lewej do prawej i od góry do dołu jak czegoś nie zepsujesz z pixelami paddingami i marginami. Zobacz sobie mój kod. Prawym na stronę i wyswietl źródło strony. Css też tam masz: kliknij na to 
../../../style.css
Powodzenia

0 głosów
odpowiedź 19 września 2017 przez turtelian Obywatel (1,760 p.)
zapytani o media lub (latwiej i przyjemniej) uzyc bootstrapa
komentarz 19 września 2017 przez wariacik Użytkownik (680 p.)
Jestem początkujący i bootstrapa jeszcze sie nie uczylem za wiele. Na poczatku chciałbym stworzyc kilka stron bez frameworkow
komentarz 19 września 2017 przez turtelian Obywatel (1,760 p.)
też jstem początkujacy :) bootstrap to bardzo proste narzedzie, ale rozumiem po prostu zrób zapytanie o media i poniżej jakiejś rozdzielczości daj szerokość divów z obrazkami na 100% :)
0 głosów
odpowiedź 19 września 2017 przez EdeX Mądrala (5,110 p.)
Powiem ci ze nie mam czasu patrzec na kod moze potem jak sobie przypomne ale z tego co pisales to zrobil bym div'a "container" a w nim div z class a w nim obrazek tez z class i tak wystylizowal te obrazki by wszystkie maly taki sam rozmiar a div ze kazdy ma zajmowac dajmy tak 33% szerokoci diva "container" ktry by mial width 100% i potem napisal @media :)
komentarz 19 września 2017 przez wariacik Użytkownik (680 p.)
Dobry pomysł dzieki
komentarz 20 września 2017 przez EdeX Mądrala (5,110 p.)

nie ma za co smiley

Podobne pytania

0 głosów
1 odpowiedź 162 wizyt
pytanie zadane 20 listopada 2022 w HTML i CSS przez Misiek Mądrala (5,300 p.)
0 głosów
3 odpowiedzi 863 wizyt
pytanie zadane 11 listopada 2018 w HTML i CSS przez YakumoPL Obywatel (1,970 p.)
+2 głosów
1 odpowiedź 238 wizyt

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...