Două coloane la preț de una
Cred că una din provocările vieții de front end developer este să faci o listă cu… Două coloane. În teorie, este simplu:
La o listă de forma:
<ol> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol>
Bagi CSS-ul ăsta:
li {
width:50%;
float:left
}
De ce în teorie? Pentru că lista nu va arăta – cum e normal, de altfel – ca o listă pe două coloane ci ca una în zig-zag:
1 - 2 3 - 4 5
Ceea ce, între noi fie vorba, e cam nasol. Mai ales când vrei să afișezi o listă ordonată.
Soluția
jQuery, desigur!
$('li').slice(0, Math.ceil($('li').length/2)).addClass('leftside'); // selectăm prima jumătate de listă și îi adăugăm o clasă
Și puțin CSS:
li {
width:50%;
margin-left:50%;
}
li.leftside {
float:left;
clear:left;
margin-left:0;
}
Și gata. Avem o listă cu două coloane.
Foarte tare ! Sa vad dacă ma duce bibilica sa o si implementez pe blog ! Sarumana !
Daca nu ma insel, CSS3 baga si coloane. Am dreptate?
Andrei, nu te înșeli. Chestia e că nu știu cât de bine afișează coloanele din CSS liste
//Edit:
Tocmai am încercat pe prima listă din pagina Demo și nu prea merge. La liste nu are niciun efect:
li { -moz-column-width:20em; -moz-column-gap:1em; }cred că merge dacă incluzi lista într-un div la care să pui atributele pentru coloane.
cel puțin mie într-un widget pe blog îmi merge
păcat că nici IE, nici Opera nu suportă partea asta de CSS.
Păi se cam duce dracu ideea de semantică dacă faci asta
Nu cred că e nicio diferență (dpdv semantic) că pui lista într-un div sau că adaugi o clasă la prima jumătate din elementele listei 
Merge, doar că declarațiile pt columns trebuie să le pui pe container(ol), iar li-urile să fie cu width: auto. like so:
ol { column-count: 2; -moz-column-count: 2; -webkit-column-count: 2; column-gap: 0; -moz-column-gap: 0; -webkit-column-gap: 0; }Sunt 2 probleme în schimb:
Din câte știu, break-inside: avoid-column încă nu s-a implementat în webkit. Pe -moz nu mai rețin dacă era sau nu. Asta înseamnă ca s-ar putea să te faci cu un li spart în două bucăți, dacă ai doar conținut inline pe el. Adică prima bucată ar fi pe 5 si a doua deasupra la 6, pe demo-ul tău. Există un workaround care te poate scoate uneori, anume să pui inline-block pe conținutul din li.
Tot pe webkit, dacă li-urile au position: relative iți crăpa (n-am mai testat de câteva luni, poate e fixed) destul de urât, parcă ar fi scoase coloanele din normal flow, dar nu 100% ca la floats.
Cu toate astea, am avut cazuri în care se putea folosi și își face treaba, crippled as it may be right now…
Ştef: pfff, nu ştiu la ce naiba m-am gândit când am pus stilurile pe LI
Având în vedere că încă n-am avut norocul să dau peste un client care nu vrea suport pentru niciun IE, nu prea am putut folosi bucurii d’astea
Incearca urmatorul cod – din cate stiu merge peste tot mai putin in IE6
li:nth-child(odd) { float:left; clear:left; margin-left:0; } li:nth-child(even) { width:50%; margin-left:50%; }Sau asta face exact ce incerci tu sa eviti?
sau asa tot cu js
var a = $('li'); a.filter(":lt("+ Math.ceil(a.length/2) +")").addClass('leftside');@Stef, @Webilă, @Ionuț Popa: câte bordeie, atâtea obiceie
Sunt convins că mai sunt câteva metode pentru a putea face asta. Am folosit (și prezentat) o metodă care mi s-a părut la îndemână 
@webila codul tau pune una in stanga una in dreapta
Cum zice Ionut, metodele sunt diverse.
Desi se prefera sa fie pe cat posibil doar CSS, cateva linii de JS chiar sunt magice uneori, in special in cazul minunatului jQuery.