Marcin12123 Napisano Grudzień 10, 2022 Zgłoś Udostępnij Napisano Grudzień 10, 2022 Cześć i czołem! Potrzebuję pomocy - chciałbym bardzo aby wszystkie zdjęcia (8 fotek) były w dwóch poziomiach i wzajemnie się wypełniały tworząc blok. .gallery-item img { display: block; width: 100%; height: 100%; object-fit: cover; Mam coś takiego w stylach. Wie może ktoś co z tym zrobić? Cytuj Link do komentarza Udostępnij na innych stronach More sharing options...
EMUSING Napisano Grudzień 10, 2022 Zgłoś Udostępnij Napisano Grudzień 10, 2022 Aby zapewnić, że zdjęcia będą wypełniać blok w dwóch poziomach, musisz wprowadzić dodatkową logikę do swojego kodu CSS. Możesz na przykład użyć selektorów następnego rodzeństwa (~) lub pseudoelementów (:nth-child), aby określić, które zdjęcia powinny być w pierwszym wierszu, a które w drugim. Na przykład, jeśli chcesz, aby wszystkie parzyste zdjęcia były w pierwszym wierszu, a nieparzyste w drugim, możesz użyć następującego kodu: .gallery-item img:nth-child(even) { display: block; width: 100%; height: 100%; object-fit: cover; float: left; } .gallery-item img:nth-child(odd) { display: block; width: 100%; height: 100%; object-fit: cover; float: right; } Możesz również użyć selektora ~ w celu wybrania wszystkich zdjęć po określonym zdjęciu. Na przykład, jeśli chcesz, aby pierwsze zdjęcie było w pierwszym wierszu, a pozostałe w drugim, możesz użyć następującego kodu: .gallery-item img:first-child { display: block; width: 100%; height: 100%; object-fit: cover; float: left; } gallery-item img:first-child ~ img { display: block; width: 100%; height: 100%; object-fit: cover; float: right; } Pamiętaj, że musisz również ustawić atrybut float dla każdego zdjęcia, aby zapewnić, że będą one wypełniać blok w dwóch poziomach. Mam nadzieję, że pomogłem! Cytuj Link do komentarza Udostępnij na innych stronach More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.