Envelopper des listes dans des colonnes

Question

J'utilise ColdFusion pour créer un modèle contenant des listes HTML ( <ul> ).

La plupart d'entre elles ne sont pas très longues, mais quelques-unes ont des longueurs ridiculement longues et pourraient vraiment tenir sur 2 ou 3 colonnes.

Existe-t-il un moyen HTML, ColdFusion ou peut-être JavaScript (jQuery est disponible) pour le faire facilement? Cela ne vaut pas une solution trop lourde et trop compliquée pour économiser du défilement.

Answer 1

J'ai donc extrait cet article de A List Apart CSS Swag: Listes multi-colonnes . J'ai fini par utiliser la première solution. Ce n'est pas la meilleure solution, mais les autres nécessitent soit l'utilisation de HTML complexe qui ne peut pas être généré de manière dynamique, soit la création de nombreuses classes personnalisées, ce qui pourrait être fait mais nécessiterait des charges de style en ligne et peut-être une énorme page.

D'autres solutions sont toujours les bienvenues.

Answer 2

Si le support de Safari et de Firefox vous convient, il existe une solution CSS:

 UL { 

Je ne suis pas sûr de l'opéra.

Answer 3

Il n'y a pas de pur CSS/HTML façon d'atteindre cet objectif, pour autant que je sais. Votre meilleur pari serait de le faire dans de pré-traitement (si la liste de longueur > 150, divisé en 3 colonnes, esle si > 70, divisé en 2 colonnes, d'autre 1).

L'autre option, à l'aide de JavaScript (je ne suis pas familier avec la bibliothèque jQuery en particulier) serait de parcourir les listes, probablement d'après eux étant d'une certaine classe, compter le nombre d'enfants, et si elle est assez élevée, un certain nombre, créer dynamiquement une nouvelle liste après le premier, le transfert d'un certain nombre d'éléments de la liste à la nouvelle liste. Aussi loin que la mise en œuvre de l'colonnes, vous pourriez probablement faire flotter à gauche, suivi par un élément qui avait le style clear:left ou clear:both.

CSS:

ul.column {
    float:left;
    width:50%;
}
div.clear {
    clear:both;
}

HTML:

<ul class="column">
    <li>Item 1</li>
    <li>Item 2</li>
    <!-- ... -->
    <li>Item 49</li>
    <li>Item 50</li>
</ul>
<ul class="column">
    <li>Item 51</li>
    <li>Item 52</li>
    <!-- ... -->
    <li>Item 99</li>
    <li>Item 100</li>
</ul>
<div class="clear" />

Answer 4

J'ai fait ça avec jQuery - il est multi-plateforme et un minimum de code.

Sélectionnez l'UL, le clone, et l'insérer après le précédent UL. Quelque chose comme:

$("ul#listname").clone().attr("id","listname2").after()

Cela permettra d'insérer une copie de votre liste après le précédent. Si la liste initiale est de style avec un float:left, ils doivent apparaître côte à côte.

Ensuite, vous pouvez supprimer les objets de la liste de gauche et les objets les plus bizarres de la main droite de la liste.

$("ul#listname li:even").remove();
$("ul#listname2 li:odd").remove();

Maintenant, vous avez une gauche à droite, deux colonnes de la liste.

Pour faire plus de colonnes que vous souhaitez utiliser .slice(begin,end) et/ou l' :nth-child- sélecteur. c'est à dire, pour 21 LIs vous pourriez .slice(8,14) pour créer une nouvelle UL inséré après l'original de votre UL, puis sélectionnez l'original de l'UL et de supprimer la li sélectionnés avec ul :gt(8).

Essayez le. Bibeault/Katz livre sur jQuery, c'est une grande ressource.