Comment modifier l'orientation d'un <ul> couvrant plusieurs colonnes ?

Question

Je suis en train de produire un <ul> d'éléments triés par ordre alphabétique, qui s'étend sur plusieurs lignes. En voici un exemple :

http://jsfiddle.net/H4FPw/1/

actuellement, la liste est présentée horizontalement, comme suit :

a  b  c

d  e  f

g  h  i

j  k  l

Mais les clients étant des clients, il m'a été demandé de modifier cette liste de manière à ce qu'elle soit orientée verticalement, comme suit :

a  e  i

b  f  j

c  g  k

d  h  l

Malheureusement, je ne sais pas comment le faire d'une manière aussi agréable et ordonnée que je l'ai fait à l'origine.

Quelqu'un pourrait-il m'indiquer si cela est possible avec un système de gestion unique ? <ul> et CSS ? Ou dois-je établir plusieurs listes ?

Answer 1

Il n'est pas nécessaire d'utiliser plusieurs listes, il suffit de faire des mathématiques sur les matrices.

J'ai fait un essai ici et tant que l'ordre alphabétique est horizontal et que la ligne et la colonne sont connues, vous pouvez le transformer avec jQuery.

http://jsfiddle.net/H4FPw/12/

Edit : Oh oui, j'ai ajouté un id="place" à l'attribut <ul> .

Answer 2

Vous ne pouvez pas le faire en modifiant uniquement le CSS.

Vous pouvez le faire si vous ne vous souciez pas d'IE : http://caniuse.com/#search=multiple%20column

Il faut bien faire un compromis quelque part :

• Séparer les <ul> en trois <ul> manuellement.
• Comme l'a suggéré @PeeHaa, utilisez du code côté serveur pour modifier le fichier commande que le <li> (tout en les gardant à l'intérieur d'un seul fichier <ul> ).
• Utilisez JavaScript pour réorganiser les <li> s. Pour ce faire, j'ai utilisé jQuery ici mais il serait probablement plus logique d'utiliser un plugin comme celui-ci : http://welcome.totheinter.net/columnizer-jquery-plugin/

Answer 3

J'utiliserais Colonnes CSS3 ou JavaScript. Je ne sais pas si c'est possible avec CSS2.

Answer 4

Si vous le faites en PHP vous pouvez utiliser un simple compteur et % . J'ai réussi à le faire en WordPress pour obtenir une liste de taxonomies personnalisées :

<div class="row gutters">

    <?php $taxos = get_categories ( array( 'taxonomy' => 'make' ) ); ?>

    <?php $count = 0; ?>

    <div class="col col_2">

        <ul>

            <?php foreach( $taxos as $tax ) : ?>

                <li><a href="http://stackoverflow.com/make/<?php echo $tax->slug; ?>"><?php echo $tax->name; ?></a></li>

                <?php $count++; ?>

                <?php if( $count % 5 == 0 ) echo '</div></ul><div class="col col_2"><ul>'; ?>

            <?php endforeach; ?>

        </ul>

    </div>

</div>

Vous pouvez également faire une boucle dans un tableau et obtenir la même chose. Le résultat ressemble à quelque chose comme :

a    f
b    g
c    h
d    i
e    j