Umieszczanie div'ow obok siebie.

Question

Proszę o pomoc lub wskazówki.
Na stronie mają być tylko dwa div'y obok siebie z zawartością a pod nimi jeden div "pusty". W każdym z div'ow leżących obok siebie znajduje się plik graficzny *.svg, w lewym o wielkości 10474 x 7290 px, a w prawym o wielkości 10743 x 4842 px. Obydwa te div'y mają w sekcji <style> wpisy "float:left" a div leżący pod nimi ma wpis "clear:both". Spodziewałem się zatem, że dwa górne div'y będą leżeć koło siebie w poziomie, a tu lipa, drugi jest pod pierwszym. Kod jest prawidłowy, bo jak wstawię zamiast tych plików *.svg dowolne małe pliki np. *.jpg, to leżą tak jak chcę w poziomie. Dlaczego tak się dzieje, czy chodzi o wielkość plików, czy o ich format ? Ktoś może zapytać, co za durny pomysł umieszczania tak dużych plików obok siebie i po co. Pomysł mam taki, że za pomocą suwaków przeglądarki zawartość lewego div'a można będzie oglądać tylko do jego prawej krawędzi (czyli prawy div będzie niewidoczny), a potem po jakiejś akcji na stronie, np. button, prawy div zacznie się powoli nasuwać na div lewy spoza prawej krawędzi ekranu dotąd, aż zasłoni ten lewy całkowicie i będzie widać tylko ten prawy a potem po innej akcji odwrotnie.
Jacek Drożdżeński

Answer 1

Raczej zastosowałbym tutaj flexboxa z wyłączonym wrapem: https://jsfiddle.net/Comandeer/uwL0drah/

Obydwa divy znajdują się w kontenerze, który ma display: flex oraz overflow: auto hidden. Ta pierwsza własność tworzy nam flexboxa a druga – powoduje pojawienie się poziomego paska przewijania. Dla samych divów z kolei trzeba dodać flex-shrink: 0, żeby wyłączyć ich zmniejszanie (domyślnie będą "ściśnięte", żeby zmieścić się w oknie przeglądarki).

Comments

Dziękuję koledze za szybką odpowiedź i za przykład, doceniam jak najbardziej. Temat flexboxa jest mi niestety obcy, będę go zgłębiał. Ale czy można prosić o odpowiedź na pytania, które zawarłem poprzednio. Dlaczego mnie to nie wychodzi ?

Pozdrawiam

JD

---

Bo float umieszcza rzeczy obok siebie tylko wówczas, gdy jest miejsce. Jeśli tego miejsca nie ma, to elementy lądują jeden pod drugim. Jeśli nie ma żadnego kontenera, który miałby odpowiednią długość, to wówczas float nie wyjdzie poza szerokość viewportu (ekranu)

---

Szanowny kolego

Tą prostą odpowiedzią rozwiązałeś mój problem. Wystarczyło ustalić wymiary kontenera, że ja na to kurczę nie wpadłem. Dziękuję bardzo i pozdrawiam. Resztę problemów rozwiązuję sam.

JD