GoldenLine
Zaloguj się
Przemysław P.

Przemysław P. User Interface
Designer / Grafik

Temat: Jedna lista, 3 kolumny

Hej,

Mam nadzieję, że dobrze określę swój problem z listą. Mam taką oto listę:

<div id="costam" style="height:300px">
<ul>
<li>1</l1>
<li>2</l1>
<li>3</l1>
<li>4</l1>
<li>5</l1>
<li>6</l1>
</ul>
</div>

Nieważne, co znajduje się między znacznikami <li>, dla zobrazowania użyłem cyfer, jednak w normalnych przykładzie będzie tam sporo tekstu. Dodany dla przykładu styl wysokości też jest tu istotny.

Chcę, aby lista była wyświetlana w 3 kolumnach, ale w taki sposób, aby było to na zasadzie:
1 3 5
2 4 6

nie zaś, tak jak to jest z floatem dla <li>, że wychodzi
1 2 3
4 5 6

Niestety nie mogę ingerować w samą strukturę, mogę tylko operować stylami.
Link do wypowiedziLink
Marek Stępień

Marek Stępień JavaScript
developer, front-end
engineer.

Temat: Jedna lista, 3 kolumny

Goły CSS 3 + niestandardowe wersje dla Gecko i WebKitu:



#costam ul {

  column-count: 3;

  -moz-column-count: 3;

  -webkit-column-count: 3

}


Więcej info i dodatkowe możliwości (odstępy i separatory między kolumnami): CSS 3 Columns. Opis dotyczy Gecko [Firefox 1.5+], ale dla WebKitu wystarczy zwykle podstawić "webkit" zamiast "moz" i powinno być OK.

Jeśli ma działać w innych przeglądarkach (IE, Opera), bez ingerencji w strukturę - tj. np. rozłożenia równomiernie po trzech komórkach <td> tabeli (może być przy użyciu JS) się nie obejdzie. Dla popularnej biblioteki jQuery są odpowiednie pluginy, choć jakość rozwiązań JS jest dużo mniejsza niż w/w własności CSS 3. :)Marek Stępień edytował(a) ten post dnia 20.09.10 o godzinie 23:11
Link do wypowiedziLink

konto usunięte

Temat: Jedna lista, 3 kolumny

Można też poeksperymentować bez nowinek z CSS 3 - http://www.alistapart.com/articles/multicolumnlists/

No ale to troszkę taka sztuka dla sztuki ;)
Link do wypowiedziLink
Marek Stępień

Marek Stępień JavaScript
developer, front-end
engineer.

Temat: Jedna lista, 3 kolumny

Przykłady z A List Apart, mimo że ciekawe, dotyczą konkretnego przypadku, w którym:
a) masz stałą liczbę elementów
b) masz kontrolę nad elementami na tyle, żeby wstrzyknąć klasy "columnN" i "reset".

Nie są więc rozwiązaniem ogólnym.
Link do wypowiedziLink

konto usunięte

Temat: Jedna lista, 3 kolumny

Marek Stępień:
Nie są więc rozwiązaniem ogólnym.

Zdecydowanie się zgadzam - dlatego pisałem o rozwiązaniach eksperymentalnych ;)
Link do wypowiedziLink
Michał Niewitała

Michał Niewitała front-end developer

Temat: Jedna lista, 3 kolumny

http://www.madeincima.eu/blog/jquery-plugin-easy-list-...
Link do wypowiedziLink

konto usunięte

Temat: Jedna lista, 3 kolumny



<style>

 ul li {float:left;width:30%;display:block;}

</style>



<div id="costam" style="height:300px">

  <ul>

     <li>1</l1>

     <li>2</l1>

     <li>3</l1>

     <li>4</l1>

     <li>5</l1>

     <li>6</l1>

  </ul>

</div>


coś takiego ??
Link do wypowiedziLink

konto usunięte

Temat: Jedna lista, 3 kolumny

Michał Szaniewski:
[ciach]

coś takiego ??

najpierw czytamy wątek, potem odpowiadamy :D

"Chcę, aby lista była wyświetlana w 3 kolumnach, ale w taki sposób, aby było to na zasadzie:
1 3 5
2 4 6"
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

formatowanie bloku tekstu w...




Wyślij zaproszenie do
Anuluj