[CSS3&JS] Sortowanie pionowe - jak ikony w Windows

Odpowiedz Nowy wątek
2011-09-06 17:44
0

Witam.
Jak zrobić siatkę ikon jak w Windows?
Standardowo elementy w przypadku:

<div style="float:left;">Div Pierwszy</div>
<div style="float:left;">Div DRUGI</div>
<div style="float:left;">Div TRZECI</div>
<div style="float:left;">Div CZWARTY</div>
<div style="float:left;">Div PIĄTY</div>
<div style="float:left;">Div SZÓSTY</div>

Ustawiają się w kolejności:
Div Pierwszy | Div Drugi | Div Trzeci
Div Czwarty | DIV PIĄTY | DIV Szósty

Natomiast jak wykonać, by kolejność była:
DIV Pierwszy | Div Czwarty
Div Drugi | Div Piąty
Div Trzeci | Div Szósty

?

PS.
O co mi chodzi dokładnie? Chcę dodać do mojego projektu ikony -> http://img833.imageshack.us/img833/5406/4e66401560587.png <- , nie wiem jak za to się zabrać. Moim ostatecznym wyjściem jest:
http://jqueryui.com/demos/droppable/#revert

Czyli pobrać szerokość i wysokość obszaru roboczego, następnie wyliczenie ile div'ow się zmieści. Dodać do nich Droppable. Dałoby to efekt ikon w Windowsie, lecz kosztem wydajności - bo jak siatka będzie miała 20x20 ikon, przy założeniu że ikona ma 32px, to daje nam aż 400divów + eventy jQuery.


edytowany 3x, ostatnio: madmike, 2011-09-06 19:24
css3 albo javascript, wybieraj. - Kwpolska 2011-09-06 17:51
jak da się tak zrobić w CSS3, to bardzo chętnie. Ważnym elementem jest zapisywanie kolejności ikon - by można później było je odtworzyć. - bordeux 2011-09-06 17:54

Pozostało 580 znaków

2011-09-06 17:57
0

http://is.gd/oqavRl powinno starczyć.

http://jsfiddle.net/bordeux/Gufcq/ -> tutaj już testowałem. Niestety - div w Chrome jest przecięty, a reszta dodana do 2 kolumny. - bordeux 2011-09-06 18:09

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0