Je souhaite afficher les éléments de la liste sous 2 ou plusieurs colonnes (alignement dynamique)

Je peux faire la liste en utilisant float:left; comme ça

Entrez la description de l'image ici

Mais j'aimerais le montrer comme ceci (comme 2 ou plusieurs colonnes)

Entrez la description de l'image ici

Comment puis je faire ça?

@sandeep a donné une bonne solution. Malheureusement, il ne fonctionne pas dans IE (besoin de 7 et plus).

de l'aide?

Pour cela, vous pouvez utiliser la propriété column-count :

 div#multicolumn1 { -moz-column-count: 2; -moz-column-gap: 50%; -webkit-column-count: 2; -webkit-column-gap: 50%; column-count: 3; column-gap: 50%; } 

Vérifiez ce jsFiddle .

Remarque: Cela ne fonctionne pas dans IE.

Pour IE, vous pouvez utiliser ce JavaScript: CSS3 – Démonstration de la mise en page de plusieurs colonnes

Cela fonctionne très bien, le navigateur croisé, aucun JS requis. Vous limitez simplement la largeur de vos colonnes.

 <style> ul.col {width:60px;float:left;margin:0 5px 0 0;padding:0;} ul.col li {width:50px;background:#999;list-style-type:none;margin:0 0 5px 0;padding:5px;} </style> <ul class="col"> <li>1(li)</li> <li>2(li)</li> <li>3(li)</li> <li>4(li)</li> <li>5(li)</li> </ul> <ul class="col"> <li>6(li)</li> <li>7(li)</li> <li>8(li)</li> <li>9(li)</li> <li>10(li)</li> </ul> 

Si vous êtes coincé avec eux tous dans un UL sur le chargement de la page, vous pouvez les diviser avec jQuery pour créer les mêmes résultats:

 <script> $(function(){ //on document ready var perCol = 5; var $ul = $('ul.col'); var rows = Math.ceil($ul.find('li').length/perCol); for(var i=1;i<=rows;i++){ $ul.after('<ul class="col"></ul>'); } for(var i=1;i<=rows;i++){ $ul.find('li:lt('+(perCol)+')').appendTo('ul.col:eq('+(i)+')'); } $ul.remove(); }); </script> 

Tant que les éléments de votre liste sont une largeur fixe, comme dans vos exemples, ne pourriez-vous simplement faire quelque chose comme dans cette violon? http://jsfiddle.net/swNYE/1/

Et partout où votre liste est écrasée, appliquez simplement la classe "gauche" au premier semestre, et la classe "droite" à la seconde moitié. Si vous ajoutez dynamiquement du contenu par l'intermédiaire de Javascript, il vous suffirait d'exécuter chaque fois que quelque chose est ajouté et d'appliquer la nouvelle classe correcte.

HTML:

 <ul> <li class="left">1</li> <li class="left">2</li> <li class="left">3</li> <li class="left">4</li> <li class="right">5</li> <li class="right">6</li> <li class="right">7</li> <li class="right">8</li> </ul> 

CSS:

 li { width: 100px; } li.left { float: left; clear: left; } li.right { margin-left: 100px; } 

Ci-dessous un éditeur de colonne, prend comme argument le nombre de colonnes.

Appel: $ (elem) .columnize (3)

http://jsfiddle.net/Bdsj9/28/

Testé dans IE6 du vin dans Ubuntu 10.04: fonctionne (il semble mieux si vous augmentez la largeur dans la feuille de style que j'ai emprunté à @micha – merci, btw)

 (function($) { $.fn.decolumnize = function() { this.children().map(function(index, el) { var oldPos = null; var posClass = null; if($(el).attr("class") && (posClass = $(el).attr("class").match(/orig\-readorder\-[0-9]+/))) { oldPos = parseInt(posClass[0].replace("orig-readorder-", "")); $(el).removeClass(posClass[0]); } return { elm: el, pos: oldPos ? oldPos : index } }).sort(function(a,b) { return a.pos > b.pos ? 1 : -1; }).map(function(index, ob) { return ob.elm; }).appendTo(this); return this.children().css("float", "left").css("clear", "none"); }; $.fn.columnize = function(numcols) { var numItems = this.children().length; var divisor = Math.ceil(numItems / numcols); var indexOfFinal = null; this.decolumnize(); var resorted = this.children().map(function(index, el) { return { position: (index % divisor) + (index / numItems), elm: el, isFinal: index == numItems - 1, origPos: index }; }).sort(function(a, b) { return a.position > b.position ? 1 : -1; }); return resorted.map(function(index, ob) { if (indexOfFinal) { /** TODO: fix redundancy **/ if ((index - indexOfFinal - 1) % (numcols - 1) == 0) { if ($.browser.msie && resorted[index - 1]) $(resorted[index - 1].elm).css("float", "none"); $(ob.elm).css("clear", "left"); } } else { /** TODO: fix redundancy **/ if (index % numcols == 0) { if ($.browser.msie && resorted[index - 1]) $(resorted[index - 1].elm).css("float", "none"); $(ob.elm).css("clear", "left"); } } if (ob.isFinal) indexOfFinal = index; $(ob.elm).addClass("orig-readorder-" + ob.origPos); return ob.elm; }).appendTo(this); }; })(jQuery); 

Ce qu'il fait, c'est d'abord calculer le classord, car avec un simple style, cela ne fonctionnera pas. Pour calculer le classement, vous devez connaître le nombre de colonnes à l'avant. Ceci vous permet d'utiliser comme diviseur pour présenter un 'clear: left'.

De plus, en utilisant le nombre d'éléments de liste et le nombre de colonnes dont vous avez besoin pour estimer un nombre de lignes. Cela peut être utilisé comme diviseur pour trier les éléments en fonction du reste entre leur index et le nombre de lignes.

Pour granuler la tri, l'index original est également pris en compte …

Une fois que le dernier élément original a été placé, le nombre de colonnes doit être réduit de 1. C'est pourquoi je stocke isFinal-boolean. Je suis sûr que cela pourrait être fait plus élégamment avec un calcul intelligent.

Ensuite, introduisez la «claire: la gauche au bon endroit et rangez la position d'origine dans une classe afin que vous puissiez recourir à un stade ultérieur (par exemple lors de l'insertion ou de la suppression d'un élément de liste dynamiquement)

Meilleur!

J'ai trouvé un moyen de le faire aussi dans IE. (En utilisant clairement)

Html:

 <div class="left child">1</div> <div class="child">5</div> <div class="left child">2</div> <div class="child">6</div> <div class="left child">3</div> <div class="child">7</div> <div class="left child">4</div> <div class="child">8</div> 

Css:

 .child { height:20px; width: 20px; text-align: center; border: 1px solid #CCC; background-color: #EEE; color: #000; padding: 5px; float: left; margin: 5px; } .left { clear: left; } 

Voir http://jsfiddle.net/pMbtk/31/

VOIR MA NOUVELLE RÉPONSE – BEAUCOUP MIEUX QUE CETTE

Si vous avez affaire à des éléments à largeur fixe, cette solution CSS pure qui fonctionne dans IE7 +. L'exemple est http://jsfiddle.net/VVMnq/33/ . Cela nécessiterait que vous connaissiez certaines choses sur le html avec lequel vous travaillez (où la nouvelle colonne doit commencer). Voici la colonne 2 plus longue, juste pour voir comment elle la gère: http://jsfiddle.net/VVMnq/42/

HTML

 <ul class="TwoColumn"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li class="column2">6</li> <li class="column2">7</li> <li class="column2">8</li> <li class="column2">9</li> <li class="column2">10</li> </ul> 

CSS

 .TwoColumn { width: 20px; padding-left: 22px; /* width plus borders of li's */ } .TwoColumn li { display: block; width: 100%; padding: 0; margin: 0 -22px 0 -22px; /* width of ul plus borders on li's */ float: left; clear: left; border: 1px solid blue; } .TwoColumn .column2 { float: none; /* this could be set to float: left and it seemed to work also */ clear: none; margin: 0 -11px 0 0; /* this should be half of margins for column 1 li's */ } 

Le CSS:

 ul.parent li { float: left; } 

En utilisant jquery:

 $('.parent>li:odd').css("clear", "both"); <ul class="parent"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> 

Regardez http://api.jquery.com/even-selector/ et http://api.jquery.com/odd-selector/

NOUVELLE RÉPONSE qui est totalement différente de la première. Cela suppose que la hauteur est toujours de 5 haute (ce qui, à partir des commentaires sur la solution de jblasco faite par anglimas, c'est l'exigence). La solution ici est pure css (bien que si le nombre d'éléments est inconnu, un javascript serait nécessaire pour "compter" et définir une classe appelée en first pour indiquer quel élément est dans la première rangée).

La solution fonctionne dans IE7 + , et répondra à n'importe quel nombre de colonnes .

Voir http://jsfiddle.net/VVMnq/107/ .

HTML

 <ul class="MultiColumn"> <li class="first">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li class="first">6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> 

CSS

 .MultiColumn { overflow: auto; background-color: yellow; padding:0 10px 10px 0; float: left; } .MultiColumn li { display: block; width: 20px; height: 20px; padding: 0; margin: 10px 0px 10px 10px ; background-color: cyan; float: left; } .MultiColumn li.first { top: 0px; } .MultiColumn li.first + li { margin: 40px 0 0 -20px; } .MultiColumn li.first + li + li { margin: 70px 0 0 -20px; } .MultiColumn li.first + li + li + li { margin: 100px 0 0 -20px; } .MultiColumn li.first + li + li + li + li { margin: 130px 0 0 -20px; } 

http://jsfiddle.net/rlemon/Y5ZvA/3/, vous pouvez essayer ceci … Je ne l'ai pas testé, c'est-à-dire encore.

 ul { width:60px; height: 60px; } ul li{ float:left; width:20px; list-style:none; } ul, ul li { -moz-transform: rotate(-90deg) scaleX(-1); -o-transform: rotate(-90deg) scaleX(-1); -webkit-transform: rotate(-90deg) scaleX(-1); -ms-transform: rotate(-90deg) scaleX(-1); transform: rotate(-90deg) scaleX(-1); /* IE8+ - must be on one line, unfortunately */ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-3.061616997868383e-16, M12=1, M21=1, M22=3.061616997868383e-16, SizingMethod='auto expand')"; /* IE6 and 7 */ filter: progid:DXImageTransform.Microsoft.Matrix( M11=-3.061616997868383e-16, M12=1, M21=1, M22=3.061616997868383e-16, SizingMethod='auto expand'); }​