Forum PHP.pl

Witam serdecznie!

Piszę w tym dziale z dwóch powodów: jest często odwiedzany oraz dlatego, że mój problem jest jak mniemam "trywialny".

Chodzi o pozycjonowanie bloków div, nie będę się specjalnie rozpisywał bo tylko namieszam, dlatego zamieszczam obrazek poglądowy:



Chodzi o ułożenie tych 4 divów od lewej do prawej, a gdy się nie zmieści - przenieść do następnej możliwej pozycji patrząc od lewej.
Na przykładzie - chciałbym, aby 3 znalazła się pod 1, a 4 pod 2. Wszystkie bloki mają atrybut float: left.

Z góry dzięki za wszelkie wskazówki
Pozdrawiam.

Odświeżam temat, problem nadal nierozwiązany.

Ten post edytował modern-web 15.01.2014, 08:47:02

Coś takiego?
http://jsbin.com/AraxurE/1/edit?html,css,output

Prawie, problem pojawia się gdy czerwonemu div ustawisz height: 120px;
Zielony zjeżdża w dół, a powinien być bezpośrednio pod czarnym.

podgląd: http://jsfiddle.net/YyLg4/

Hmm, możesz mu nadać sztucznie ujemny margines.

http://jsfiddle.net/YyLg4/1/

Problem w tym, że nie wiem jaki to będzie margines a tych divów będzie 10/15/20 (kto wie) i chciałbym żeby to w miarę automatycznie działało.
Myślałem żeby zabrać się za to od innej strony - góra->dół zamiast lewo->prawo.
Czyli po prostu wpakować to w kolumny i zależnie od rozdzielczości ekranu zmniejszać ich ilość. Przyznam szczerze, że zarówno jedno jak i drugie rozwiązanie pozostawiają wiele do życzenia dlatego szukam wszelkich możliwych, byle innych sugestii.

Tak czy inaczej dzięki za zainteresowanie moim problemem, jeżeli masz jakieś propozycje na rozwiązanie tego inaczej - słucham uważnie

A powiedz mi jeszcze czy i czemu musi być to koniecznie na float: left?

Nie musi
Chodzi o to, by pojawiały się obok siebie, a gdy nie będzie miejsca - w kolejnej linii ale maksymalnie od lewej. Czyli żadnych odstępów od góry/dołu/lewej/prawej, wszędzie taki sam margines.

Podbijam i czekam na kolejne sugestie.

podbijam po raz kolejny

odświeżam

... i jeszcze raz

podbijam i zapraszam do wątku com, może Ty coś wiesz

generalnie marginesy się zgadzają są takie same, problem jest tego typu że przy float on traktuje że wszytko od lewej do prawej ma rozmiar największego bloku wiec stad ta przerwa.. css-em tego nie załatwisz niestety

Tyle wiem, właściwie to wszystko gra ale przy odpowiednim ułożeniu divów, gdy jednak ich kolejność się zmieni wszystko może się posypać a tak być nie powinno.
Masz jakieś pomysły jak to rozwiązać? Myślałem nad pobieraniem po kolei wysokości każdego diva znajdującego się w tym kontenerze głównym, a następnie umieszczenie odpowiednio ujemny marginesów ale to też nie ma prawa bytu bo nie wiem ile ich będzie w jednej linii = nie wiem któremu, ile odjąć :/
Może umieszczenie tego w kolumnach ma większy sens? Tylko wtedy CSS będzie musiał zmieniać styl zależnie od rozdzielczości, też masa roboty :/
Ahhh tyle innowacji a takie banalne problemy jak były, tak nadal są.

nie wiem co dokładnie potrzebujesz zrobić jest wiele możliwości
http://blog.piotrnalepa.pl/demo/flexbox-model/
http://www.code-sucks.com/css%20layouts/faux-css-layouts/

bodajże to się less nazywa tam pewnie by się to dało zrobić

no niestety przy RWD od media-queries nie uciekniesz .. o ile dobrze Cie zrozumiałem to tu masz gotowca http://comstudio.byethost11.com/ możesz się zainspirować

Ten post edytował com 16.01.2014, 19:37:38

RWD to tutaj najmniejszy problem, w zasadzie nie zamierzam schodzić poniżej 1000px szerokości ale chodzi o ilość tych divów, może być ich 20/30/50/70 a każdy z nich o innej wysokości ale takiej samej szerokości.

Rzuć okiem tutaj: http://jsfiddle.net/sFSZL/

Chciałbym aby zawsze każdy z nich był jak najbliżej lewej i od sąsiadujących (z góry/dołu/lewej/prawej) dzieliło go 20px

Skoro mówisz, że to niewykonalne samym floatem i kilkoma trickami to będę musiał pokombinować z tabelką

powiem Ci widziałem to gdzieś ale osobiście nie było mi to potrzebne no i nie mogę sobie teraz przypomnieć jak to tam było rozwiązane, jak będziesz znał te wysokości to można pobawić się calc() ale to dużo kombinowania by było...