Kilka div'ów obok siebie


(andrewi) #1

Witajcie. Chciałem poszerzyć jedną z prowadzonych przeze mnie stron internetowych jednocześnie uzyskując przestrzeń na dwie informacje w divach obok siebie. Udało już mi się dojść do tego jak zmusić divy do ustawiania się obok siebie, ale od dwóch godzin walczę z wolną przestrzenią, która powstaje mi po każdej trzeciej informacji z rzędu (tak jak na załączonym obrazku). Mój kod poniżej - treść to element w ramach którego pojawiają się informacje, info to div z informacjami. Będę wdzięczny za pomoc.

.tresc {margin:3px; float:left; height:auto; width:950px; background:#fff;}
.info {margin:8px; float:left; height:auto; border:solid 1px #a20000; border-radius:10px; padding:0px 0px 20px; width:450px; background:#fff; display:block;}


(Pablo_Wawa) #2

Tak pobieżnie patrząc, wydaje mi się, że problem może być przez

height:auto;


(andrewi) #3

To nie to. Teraz zauważyłem że jak w info zmienię float: left na right to ładnie układają się elementy po lewej stronie a po prawej mam dziury

Doszedłem gdzie tkwi problem, jednak nadal nie potrafię go rozwiązać. Winny jest float - trzeci obiekt nie może być oblany z lewej strony bo z definicji oblewany jest tylko z prawej, dlatego kolejny element tworzy dziurę bo może pojawić się dopiero pod tym trzecim. Pytanie jest następujące - co zrobić, aby div był oblewany z obu stron, albo żeby to jakoś inaczej sensownie ułożyć, niekoniecznie floatem.


#4

Może spróbuj się pobawić:
https://www.w3schools.com/css/css3_flexbox.asp


#5

Nie da się zrobić ładnego floatu dla tych divów bo są one różnej wysokości.


(Apostoł) #6

Nie będę zagłębiać się w kod, ale logiczne byłoby podzielić element .tresc na dwa osobne elementy tworzące dwie kolumny.


(Fizyda) #7

Tutaj masz opisane 3 możliwe rozwiązania: https://stackoverflow.com/questions/5234749/css-floating-divs-at-variable-heights. Najlepiej sprawdza się ustawienie pozycji absolutnej co do piksela, ale wymaga JS.

Ode mnie dodatkowe rozwiązanie w samym CSS, ale nie do końca idealne https://jsfiddle.net/30petst9/. jak można zobaczyć w niektórych przypadkach, zależnie od tego jak się ułożą kontenery względem siebie może dojść do lekkiego rozjechania się.

EDIT:
Oczywiście można to podzielić po stronie serwera na dwa kontenery (lewy i prawy) i co drugiego wrzucać do prawego kontenera tak jak zaproponował to @Apostol1, ale rozwiązanie takie obciąży z kolei dodatkowo serwer oraz chyba wpłynie negatywnie na SEO (trzeba skonsultować ze specjalistą).

Generalnie ja bym chyba wolał wyświetlać jednakowej wysokości wiadomości z odnośnikiem do pełnej treści ponieważ lepiej wpłynie to na SEO oraz sprawi iż użytkownicy zaczną częściej odwiedzać podstrony serwisu.

Teraz moja subiektywna opinia, nie lubię wyświetlania dłuższych treści które trzeba czytać w dwóch lub więcej kolumnach, tym bardziej jeśli treści mają różną wysokość. Jest to niewygodne dla czytelnika, strona internetowa to nie gazeta by układ wielokolumnowy sprawdzał się do prezentowania dłuższych treści.


(Apostoł) #8

@Fizyda Oj tam, przecież widać, że jest to jakaś kameralna stronka dla małej grupy docelowej, nie ma co się zastanawiać nad takimi szczegółami…


(Fizyda) #9

@Apostol1 dla mnie nie ma różnicy czy robię duży serwis albo aplikację czy małą stronę firmową typu wizytówka, wszystko ma być zrobione najlepiej jak umiem. Zarówno jakość kodu ma być najlepsza jaką jestem w stanie na dzień dzisiejszy zapewnić jak i projekt całej witryny. Nie należy nigdy ignorować user experience bo nie jeden raz jakiś projekt zyskiwał na popularności tylko dlatego że był dobrze zaprojektowany w przeciwieństwie do konkurencji i użytkownicy wygodnie mogli używać aplikacji.
UI i UX jest tak samo ważne jak dobry i zoptymalizowany kod, możesz mieć najpiękniejszy kod, mieć najlepsze funkcje, ale jak zawalisz UI i UX nie będziesz miał użytkowników/klientów.


(Apostoł) #10

@Fizyda Z tego co mówisz, to trzeba by zaorać całą tą stronę i zrobić od nowa. A raczej nie o to chodzi.


(Fizyda) #11

Nie koniecznie, można poprawiać systematycznie małymi kroczkami. Czasami faktycznie taniej/szybciej/lepiej zrobić coś od nowa, ale nie zawsze ma to sens.

Edit:
Poza tym ciężko coś powiedzieć na podstawie jednego screena.


#12

https://www.w3schools.com/css/css3_multiple_columns.asp
https://css-tricks.com/guide-responsive-friendly-css-columns/

Spróbować można, jak nie masz użytkowników IE 9 i starszych https://caniuse.com/#search=column: