Skocz do zawartości
infector2

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

dodany przez infector2, w Programowanie

Rekomendowane odpowiedzi

infector2    0

infector2
Napisano

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

januzi    24

januzi
Napisano

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

infector2    0

infector2
Napisano (edytowane)

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

januzi    24

januzi
Napisano

javascript + position: absolute + left/top liczone dynamicznie

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi
Udostępnij na innych stronach

Matt91111    5

Matt91111
Napisano

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

infector2    0

infector2
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ę
Przejdź do listy tematów

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

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

×
×
  • Dodaj nową pozycję...