GoldenLine
Zaloguj się
Piotr Danielewicz

Piotr Danielewicz front-end developer,
Media 4 U

Temat: Równomierne rozłożenie elementów

Cześć
Ostatnio targa mną pewna zagwozdka cssowa.
Zastanawiam czy jest to możliwe do zrobienia (w ostateczności przy użyciu jquery).

Chodzi mi o równomierne rozłożenie elementów na szerokości kontenera.

Coś w w stylu:

| 1 2 3 |

| 1 2 3 4 5 |
| 6 7 8 9__|

a po zmianie szerokości

| 1 2 3 4 5 6 7 |
| 8 9________|

Gdzie ___ to odstępy ;)

Jak takie coś można uzyskać?
Dzięki za podpowiedźPiotr Danielewicz edytował(a) ten post dnia 04.02.12 o godzinie 18:03
Link do wypowiedziLink
Jacek H.

Jacek H. freelancer,
samodzielny twórca

Temat: Równomierne rozłożenie elementów

float: left?
Link do wypowiedziLink

konto usunięte

Temat: Równomierne rozłożenie elementów

- caly box robisz tylko z padding-left a prawego nie ustawiasz
- w srodku masz pojedyncze boxy (te swoje 1,2,3 etc) z floatem:left
- kazdy z pojedycznych ma X szerokosci i margin-right, tyle ile glowny padding-left ;)

Dzieki temu dostaniesz rowne odstepy wszedzie.
Jesli zmienisz szerokosc glownego boxu, to elementy automatycznie poprzeskukuja na gore, jesli sie zmieszcza (box width + right margin)

JEsli chcesz miecp ewnosc ze to dalej ci nie zmasakruje designu, dla glownego boxu ktore wszystkie owija, ustaw overflow:hidden (to wyczysci floaty po ostatnim elemencie)Andrzej Winnicki edytował(a) ten post dnia 04.02.12 o godzinie 18:28
Link do wypowiedziLink
Piotr Danielewicz

Piotr Danielewicz front-end developer,
Media 4 U

Temat: Równomierne rozłożenie elementów

Z float:left wszystko dobije mi do lewej strony z dziurą po prawej
Link do wypowiedziLink

konto usunięte

Temat: Równomierne rozłożenie elementów

Piotr Danielewicz:
Z float:left wszystko dobije mi do lewej strony z dziurą po prawej

Noo i tak wlasnie chcesz, wg tego co pokazales na "rysunku" ;)
Link do wypowiedziLink
Piotr Danielewicz

Piotr Danielewicz front-end developer,
Media 4 U

Temat: Równomierne rozłożenie elementów

Tak tak, ale dziura by była tylko w ostatnim wierszu. Float:left daje mi dziurę na dole i na górze, a góra chciałbym by była wyrównana do prawej strony.
Tak się zastanawiam czy nie chcę zbyt wiele ;)


Obrazek
Piotr Danielewicz edytował(a) ten post dnia 04.02.12 o godzinie 18:33
Link do wypowiedziLink

konto usunięte

Temat: Równomierne rozłożenie elementów

flaot ci daje dziure tam, gdzie powinna byc :D
Jest dokladnie to co chcesz.

masz 5 elementow - wszystkei zmieszcza sie w pierwszym wierszy - i tez tam beda rowno, idealnie rozlozone.
jesli dodasz nastepne 13 eelementow, to bedziesz mial 3 wiersze pelne (po 5) i ostatni tylko 3 i wolne miejsce po prawej

jesli zwiekszysz rozmiar strony (szerokosc), nowe elementy (jesli sie mieszcza) poprzesuwaja sie w poprzednie wiersze.
Link do wypowiedziLink
Piotr Danielewicz

Piotr Danielewicz front-end developer,
Media 4 U

Temat: Równomierne rozłożenie elementów

Staram się jak mogę i proszę o wyrozumiałość ;)
Ale mam pewne problemy albo jak pisałem nie da rady tego uzyskać bez przeliczania szerokości i odstępów.

Dwa przykłady w pliku:
http://galaxykits.com/test.html

Na pierwszym użyłem float:left

na drugim: display:inline oraz text-align:justify

I tak...
Pierwszy sposób jest ok jeśli chodzi o dziurę w niepełnym wierszu

Drugi jak widać ma tę zaletę, że ładnie równomiernie rozkłada elementy ale ma dziurę w wierszu z pełnymi wpisami

A może ja coś źle robię ;)
Link do wypowiedziLink

konto usunięte

Temat: Równomierne rozłożenie elementów

"I tak...
Pierwszy sposób jest ok jeśli chodzi o dziurę w niepełnym wierszu"

No to jak jest OK, to co jest nie tak? :D bo nadal chyba nie zdradziles detalu, ktorym (jak sie domyslam) jest fakt ze chcesz "od krawedzi do krawedzi" z przerwami pomiedzy, tak?

Jesli wlasnie oto chodzi to zrob tak:
container szerokosci 1000px, pos:relative dodaj bordera sobie jesli potrzebujesz
w srodku containter szerokosci 1020px, position:relative, left:-20px
i w srodku elementy ktore maja ustawione WIDTH na X + padding-right:20px;

musisz troche oszukac ;) tak by bylo "Gdzie schowac" te nadwyzkowe 20pxm ktore beda z jakiegos boxa zawsze.

ps. obydwa przyklady zachowuja sie dokladnie tak, jak powinny, wszystko w planie :)Andrzej Winnicki edytował(a) ten post dnia 04.02.12 o godzinie 19:37
Link do wypowiedziLink

konto usunięte

Temat: Równomierne rozłożenie elementów

http://blog.piotrnalepa.pl/2010/05/11/css-rownomierne-...
a co z display: inline-block, jak tutaj w przykładzie? :)
Link do wypowiedziLink
Łukasz Stępa

Łukasz Stępa Front-End developer

Temat: Równomierne rozłożenie elementów

nie wiem czy dobrze rozumiem.

Masz kontener np szerokości 1000px,

dajesz div okalający z overflow: hidden; w srodku dajesz divy z float: left; daną width i margin-left.
nastepnie nadajesz pierwszemu elementowi margin-left: 0, i masz rowne szerokosci elementow rownie ulozone.

Wyglada to tak:

<div id="container">
<div class="okalajacy">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>
<div class="okalajacy">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>
</div>

css:

#container { width: 1000px; }
.okalajacy { overflow: hidden; margin-bottom: 10px; }
.element { float: left; height: 50px; width: 100px; margin-left: 10px; background: black; }
.okalajacy .element:first-child { margin-left: 0; }Łukasz Stępa edytował(a) ten post dnia 04.02.12 o godzinie 20:10
Link do wypowiedziLink
Piotr Danielewicz

Piotr Danielewicz front-end developer,
Media 4 U

Temat: Równomierne rozłożenie elementów

No więc tak ;)
Problem w tym, że chcę mieć elementy rozłożone od dechy do dech w pełnym wierszu
Do tego jeszcze chcę mieć w niepełnym wierszu odstępy takie same jak w pierwszym wierszu Coś jak w tabeli. Przy czym szerokość głównego kontenera będzie się zmieniała w zależności od szerokości strony ;) Taki oto jest myk ;)

Będę musiał chyba jednak zaprząc to tego javascript i obliczać szerokości dynamicznie, bo chyba czysty css sobie z tym nie poradzi ;)Piotr Danielewicz edytował(a) ten post dnia 04.02.12 o godzinie 21:06
Link do wypowiedziLink

konto usunięte

Temat: Równomierne rozłożenie elementów

Poki same boxy w srodku sa tej samej wielkosci i odstepu w srodku, pomiedzy nimi sa TAKIE SAME, to nie ma problemu... ale jesli ty zawsze chcesz miec odpowiednia ilosc elementow i zostawic miejsce, to kurde nie kombinuj i zrob to na starej, dobrej oldskoolowej tabelce ktora sama ci sie wyreguluje rozmiarami, odstepami i wszystkim innym ;)
Link do wypowiedziLink

konto usunięte

Temat: Równomierne rozłożenie elementów

Też pytanie do czego dokładnie ma to służyć ;)
Link do wypowiedziLink
Piotr Danielewicz

Piotr Danielewicz front-end developer,
Media 4 U

Temat: Równomierne rozłożenie elementów

Tabelka byłaby OK, gdyby liczba elementów w wierszu była stała ;)

Ale rozwaliłem problem za pomocą javascriptu
Oto i przykład:
http://galaxykits.com/testx.html

Aczkolwiek nie jest jeszcze w 100% dobrze, bo po prawej stronie jest dziura ;) Ale jutro się nią zajmę ;)
:)
Link do wypowiedziLink
Łukasz Stępa

Łukasz Stępa Front-End developer

Temat: Równomierne rozłożenie elementów

Andrzej Winnicki:
Poki same boxy w srodku sa tej samej wielkosci i odstepu w srodku, pomiedzy nimi sa TAKIE SAME, to nie ma problemu... ale jesli ty zawsze chcesz miec odpowiednia ilosc elementow i zostawic miejsce, to kurde nie kombinuj i zrob to na starej, dobrej oldskoolowej tabelce ktora sama ci sie wyreguluje rozmiarami, odstepami i wszystkim innym ;)

dokładnie zgadzam się z tą opinią, jeżeli wielkości mają być równe, oraz odstępy, i szerokość kontenera ma się zmieniać a wraz z nią szerokości boxów i odstępy, to również nie widzę nic lepszego jak stara dobra zasłużona tabela :)

To nie łatwiej by było pozostawić po prostu puste komórki tabeli tam gdzie nie będzie elementów? :)Łukasz Stępa edytował(a) ten post dnia 04.02.12 o godzinie 23:47
Link do wypowiedziLink

konto usunięte

Temat: Równomierne rozłożenie elementów

Na chwilę obecną chyba nigdzie nie działa to poprawnie, ale za jakiś czas będzie. Pprzykłady z tego działu (6. Multi-line Flexbox) to chyba to, o co Ci chodzi.
http://www.w3.org/TR/css3-flexbox/#multiline
Link do wypowiedziLink

konto usunięte

Temat: Równomierne rozłożenie elementów

Michał Miszczyszyn:
Na chwilę obecną chyba nigdzie nie działa to poprawnie, ale za jakiś czas będzie. Pprzykłady z tego działu (6. Multi-line Flexbox) to chyba to, o co Ci chodzi.
http://www.w3.org/TR/css3-flexbox/#multiline

"za jakis czas" - kolega mial na mysli 10 lat, zanim bedzie to standardem i bedzie mozna stare przegladarki zignorowac ;)
Link do wypowiedziLink

konto usunięte

Temat: Równomierne rozłożenie elementów

Andrzej Winnicki:

"za jakis czas" - kolega mial na mysli 10 lat, zanim bedzie to standardem i bedzie mozna stare przegladarki zignorowac ;)

With all due respect sir...
Z takim podejściem ominie Cię sporo funu przez najbliższe 10 lat :> Po to powstają narzędzie typu Modernizr (notabane wybrany Open Source App of the Year 2011), by korzystać ze wszystkiego, co dostawcy przeglądarek mają do zaoferowania; nie z części wspólnej tego.
Link do wypowiedziLink

konto usunięte

Temat: Równomierne rozłożenie elementów

Jest już polyfill flexboksa, ale nie sprawdzałem jakie dokładnie funkcje (i w jaki sposób) obsługuje, ale to może być jakieś tymczasowe rozwiązanie dla osób, które za wszelką cenę chcą wspierać stare przeglądarki ;)
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy





Wyślij zaproszenie do
Anuluj