Skocz do zawartości
infector2

Problem w CSS3: Popularne kody nie przyciągają elementów w pozycji pionowej wewnątrz struktury

Rekomendowane odpowiedzi

Buduję stronę responsywną a w niej znajdują się 4 elementy o stałej szerokości 600px, lecz innej wysokości
- np. pierwszy i czwarty element mają po 25%, drugi i trzeci po 50% wysokości ekranu
Kody z poradnika "W3Schools" i polskich opisów nie pomogły mi rozwiązać problemu. No chyba, że nie potrafię odpowiednich wykorzystać.
A chodzi o elastyczne przeniesienie obiektów znajdujących się niżej o odległość pustej przestrzeni, tuż pod wyżej znajdujące się komórki,

=M= Ekran o rozdzielczości niższej niż 1200dpi: Elementy bez problemu tworzą regularny odstęp od siebie wzdłuż wyświetlacza
=Ś= Ekran o rozdzielczości 1200-1799dpi: Elementy w dwóch wierszach pozostawiają pomiędzy 1 a 3 i pod 4 wolną przestrzeń.
=D= Ekran o rozdzielczości 1800-2399dpi: W drugim wierszu 4 ulokowała się tylko po lewej stronie,

Dla tych, co nie zrozumieli dołączyłem plik graficzny

Z góry dzięki za odpowiedź

obiekty responsywne.jpg

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Jak wyżej, plus małe wyjaśnienie. Jak masz float na obiektach, to ich górna krawędź ustawia się względem dolnej krawędzi ostatniego obiektu znajdującego się w linii wyżej.

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Dzięki za linka - Ciekawy poradnik, ale  po kilkugodzinnych kombinacjach dzisiaj, żaden opisany sposób nie przeniósł odpowiedzi!?

Użyłem dla <div id="x" style="..."> m.in:

"display:flex; order:1; grid-template-areas:header sidebar content footer; grid-template-columns:repeat(3,1fr); grid-template-rows:1ft 1fr; flex-flow:row wrap; align-items:space-evenly; align-self:start"

Nie zastanawiałem się nad strukturą siatki, Dla każdego elementu przypisałem te sama szerokość mierzoną w pikselach, lecz nie określiłem, wysokości z powodu zamieszczonej w nich treści, Liczyłem na to, że każdy ułoży się sąsiadująco nie biorąc pod uwagę liczby kolumn i wierszy. 

<style>
html {margin:0; padding:0; background-color:#000000; background-image:url('../.png'); background-position:center bottom; background-repeat:repeat-x; background-attachment:fixed; min-height:100vh}
body {margin:0; padding:0; text-align:left; text-shadow:3px 3px 50px #202020}
#x {display:block; position:relative; overflow:hidden; margin-left:25px; margin-right:25px; background-image:url('./.png')}
#y {float:left; position:relative; margin:25px; padding:25px; background:rgba(0,0,0,1); box-shadow:0px 0px 25px 0px #000000; width:calc(100% - 125px); z-index:0}
#z p {margin:0; padding:0, font-family:Verdana; vertical-align:baseline; line-height:0px; font-size:12pt; font-style:normal; color:white; font-weight:normal}
#z a:link, a:visited {color:#808080; text-decoration:none}
#z a:hover, a:active {color:#ffffff; text-decoration:none}
</style>

<body><div id="x">
<div id="y" style="width: 500px"><div id="z">Treść 1 25% wysokości</div></div>
<div id="y" style="width: 500px"><div id="z">Treść 2-50% wysokości</div></div>
<div id="y" style="width: 500px"><div id="z">Treść 3-50% wysokości</div></div>
<div id="y" style="width: 500px"><div id="z">Treść 4-25% wysokości</div></div>
</div></body>

Na stronie zespołu Aerosmith w zakładce "social" zagnieżdżonych jest kilkadziesiąt elementów ustawionych chronologicznie w równych ostępach, a układ ich chyba najlepiej obrazuje odniesienie do problemu.

Edytowane przez infector2

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

javascript + position: absolute + left/top liczone dynamicznie

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Mój start kod, który dynamiczne liczył liczbę kolumn dla odpowiedniej wielkości ekranu, i wyświetlał określoną liczbę elementów oraz repozycjonował elementy przy zmianie wielkości ekranu, ale musisz sobie dane funkcje wyciągnąć (kod był pisany pod vue 2):

https://pastebin.pl/view/097c3c4e

Generalnie podejście jest takie że liczysz liczbę kolumn dla danej wielkości ekranu i rozdysponowujesz elementy po kolei do każdej z nich (można się pokusić o przeliczanie rozmiarów przy użyciu getBoundingClientRect i ewentualne korekty), w ten prosty sposób jesteś w stanie załadować i rozdysponować dowolną liczbę elementów.

Do tego przy dynamicznej zmianie wielkości ekranu czyścisz elementy i liczysz liczbę kolumn jeszcze raz i znowu je tam umieszczasz. Tu przyda się: https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event

 

 

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach
Napisano (edytowane)

@Januzi

Zanim podjąłem samodzielna walkę przy budowie projektu, korzystałem z kreatora, który do każdej wyświetlanej komórki kopiował te same formuły,
co powodowało mały bałagan, Podstawy HTML czy CSS pojąłem szybko, zaś "JS" postawiło na drodze ścianę.. Do tej pory nie rozumiem tego języka.

Przed wczoraj zastosowałem "...:hover overflow:auto + wyrównanie wysokości" - Kafle poukładały się w symetrycznie z ukrytym paskiem przewijania, co mogłoby przystopować moje zapędy stylistyczne. Kolejny krok poprzez rozwijanie komórek ze skryptem JS - niestety nie udany krok.

@Matt91111

Sądziłem, że wystarczy w CSS-ie krótka modyfikacja kodu do zmiany położenia obiektów... Szacunek za źródło, w wolnym czasie pokombinuję.

Poza nawiasem: -Dlaczego dla pozornie prostej komendy "position, float, itp" brakuje przypisanej wartości (przyciągnij do::top, bottom + określone calc = krawędź) dla obiektów granicznych w pionie, gdy dla linii poziomej nie stanowi problemu?

Pytanie o zachowanie odległości od dolnej krawędzi ekranu.
Do określenia odstępu od ostatniej komórki w kierunku dolnej krawędzi ekranu przypisana dla niej wartość liczbowa (tj. margin, / bottom") nie aktywuje komendy zapisanej bezpośrednio w pliku .CSS, ale dopiero po wpisaniu jej przy ostatnim nadrzędnym div-ie w pliku .html powodując zmianę odległości. Co jest przyczyną?

Edytowane przez infector2

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się

  • Ostatnio przeglądający   0 użytkowników

    Brak zarejestrowanych użytkowników przeglądających tę stronę.

  • Tematy

  • Odpowiedzi

    • powiedzcie mi ale szczerze czy "problem borderless" występuje w grach na vulkanie?
    • Witam,   Mam pewien problem związany z Aliexpress i proszę o poradę. Sprzedawca podał fałszywy kod i nie wysłał towaru, napisałem do niego i odpowiedział że wie o tej sytuacji, że nie wysłał towaru i prosi mnie abym nie otwierał sporu i zapytał mnie czy konto PayPal i aby załatwić sprawę poza Ali. Sporu chyba nawet nie mogę teraz nawet otworzyć. Proszę o poradę.  
    • stracić też sporo mógl taki urok giełdy  Nawet na zero ktoś mógł wyjść jak miał farta ja się dziwie kto im kazał tak zamawiać  Oni dobrze wiedzieli że kart nie ma a teraz udają debili  Mam na myśli kupujących. Ja również zakupiłem ale dobrze wiedziałem od samego początku że bede czekał kilka miesiecy każdy ogarniety użytkownik o tym wiedział. A jeżeli nie to naprawdę był naiwny i się nie potrzebnie łudził. Nikt nie każe płacić z góry możesz sobie czekać zamawiając pobranie ja nie rozumiem tylko co to zmienia i tak masz hajs zamrożony i tak. Najbardziej to zauwayłem narzekają ci co zamawiali karty w 20 sklepach i jeszcze płaczą a tak naprawdę przez nich to wszystko się nie potrzebnie też przedłuża. xkom nigdzie nie pisał że rtxy wysyła od ręki od początku to były preodery. Jedynie morele ładnie leciał pokazując cały czas że dostepne 30 sztuk.
    • Witam, mam pytanie odnośnie Xbox series X. Grałem ostatnio w call of duty cold war i zaciela mi sie gra (obraz stanął i cala konsola sie zatrzymala) nie moglem nic zrobic po chwili sie wylaczyla. Wlaczylem i wywalal blad E106 i 2 opcje Zresetuj ta konsole Xbox Rozwiaz problem No i probowalem resetowac i nic, niw chcialo przejac dalej i odpalic systemu. W koncu sie udalo, kiedy zrobilem przywroc dane fabryczne i usunelo mi wszystkie gry i tak jakbym logowal konsole od nowa. Teraz juz sie tak nie robi, wlacza sie normalnie. Jednak zmartwilo mnie to ze mam konsole 2 tygodnie i takie cos sie stalo. W czym moze byc problem? Czytalem ze w codzie ludziom ostatnio wylaczalo tez konsole, jednak nie wiem czy z takim bledem. Poki co obserwuję, ale boje sie ze cos sie bedzie chrzanic. Niby jest gwarancja, ale nie daje mi spokoju to ze sie tak stalo i sie denerwuje ze moze dysk walniety czy cos... Gdyby drugi raz sie tak zdarzylo to reklamowac sprzet? Mial ktos tak? Tylko raz mi sie tak zdarzylo w tym call of duty. Czy gra moze tworzyc takie problemy i jest mozliwe ze ja połataja? Wszyscy ponoc maja problem na tej mapie Moskwa i ja tez na niej grałem.
    • Jak kupiłem PS4 pro - to też się okazało, że połowa moich kabli co to miały być 2.0 nie działa z 4k A najzabawniejsze było, że jeden z tych 1.3 chodził bez problemu
  • Aktywni użytkownicy

×
×
  • Dodaj nową pozycję...