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.

12 Comentarii to “Două coloane la preț de una”

  1. Foarte tare ! Sa vad dacă ma duce bibilica sa o si implementez pe blog ! Sarumana ! ;)

  2. Daca nu ma insel, CSS3 baga si coloane. Am dreptate?

  3. Staicu Ionuț-Bogdan

    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;
    }
    
  4. 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.

  5. Staicu Ionuț-Bogdan

    cred că merge dacă incluzi lista într-un div la care să pui atributele pentru coloane.

    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 :)

  6. 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…

  7. Staicu Ionuț-Bogdan

    Ș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 :(

  8. 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?

  9. sau asa tot cu js

    var a = $('li');
    a.filter(":lt("+ Math.ceil(a.length/2) +")").addClass('leftside');
  10. Staicu Ionuț-Bogdan

    @Stef, @Webilă, @Ionuț Popa: câte bordeie, atâtea obiceie :D 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ă :)

  11. @webila codul tau pune una in stanga una in dreapta

  12. 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. :)

Show trackbacks

Ți-a plăcut articolul? Lasă un comentariu!

You can insert code snippets using BBcode:
[js].[/js] [html].[/html] [php].[/php] [css].[/css]
You can also use some HTML tags:
<blockquote>.</blockquote> <code>.</code> <a href="">.</a> <strong>.</strong> <em>.</em>

windows apple dropbox facebook twitter