Comment faire pour afficher les éléments de liste sous forme de colonnes?

Je suis en train de construire mon premier réactif de mise en page. Je veux afficher la liste des éléments dans une ligne verticale, en fonction de la largeur.

<div style="height:800px;">
    <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
       <li>6</li>
       <li>7</li>
    </ul>
</div>
1 5 
2 6 
3 7 
4

Si le navigateur est redimensionnée, je veux qu'il devienne

1 4 7 
2 5 
3 6

Quelqu'un peut m'aider? J'ai essayé pendant des heures et je ne peux pas obtenir quoi que ce soit. J'ai essayé à l'aide de tableaux, mais je ne peux pas le faire comme cela.

InformationsquelleAutor Grozav Alex Ioan | 2012-09-08
  1. 86

    Cela peut être fait en utilisant CSS3 colonnes assez facilement. Voici un exemple, en HTML:

    CSS:

    #limheight {
    height: 300px; /*your fixed height*/
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3; /*3 in those rules is just placeholder -- can be anything*/
}

#limheight li {
    display: inline-block; /*necessary*/
}

    HTML:

    <ul id = "limheight">
 <li><a href="">Glee is awesome 1</a></li>
 <li><a href="">Glee is awesome 2</a></li>
 <li><a href="">Glee is awesome 3</a></li>
 <li><a href="">Glee is awesome 4</a></li>    
 <li><a href="">Glee is awesome 5</a></li>
 <li><a href="">Glee is awesome 6</a></li>
 <li><a href="">Glee is awesome 7</a></li>
 <li><a href="">Glee is awesome 8</a></li>
 <li><a href="">Glee is awesome 9</a></li>
 <li><a href="">Glee is awesome 10</a></li>
 <li><a href="">Glee is awesome 11</a></li>
 <li><a href="">Glee is awesome 12</a></li>    
 <li><a href="">Glee is awesome 13</a></li>
 <li><a href="">Glee is awesome 14</a></li>
 <li><a href="">Glee is awesome 15</a></li>
 <li><a href="">Glee is awesome 16</a></li>
 <li><a href="">Glee is awesome 17</a></li>    
 <li><a href="">Glee is awesome 18</a></li>
 <li><a href="">Glee is awesome 19</a></li>
 <li><a href="">Glee is awesome 20</a></li>
</ul>

    • caniuse.com/#feat=multicolumn - j'espère que votre public vous permet de l'utiliser de toute façon; c'est clairement la meilleure solution. Vous pouvez également ajouter une cale pour les anciens navigateurs (google crache csscripting.com/css-multi-column; ne l'ai pas testé si
    • Ouais, si les anciens navigateurs prennent en charge est nécessaire, je pense que le JavaScript serait le seul moyen d'y parvenir.
    • Merci beaucoup! C'est clairement ce que je cherche. Aussi, je vous remercie ThiefMaster pour la compatibilité inter-navigateur solution.
    • Semble display: inline-block; pour li n'est pas nécessaire ici.
    • Le redimensionnement ne fonctionne pas. Les éléments de la colonne de ne pas modifier les colonnes. En outre pire, si la page est plus large que 6x taille de l'élément, deux éléments successifs (1 et 2) s'affichent à côté des autres sur la même ligne dans la colonne 1, puis sur la ligne suivante 3 et 4, etc. Vous avez besoin d'ajouter un peu de remplissage horizontal à la <li> pour obtenir ce clair. Le problème il la inline-block. Supprimer cela et vous obtenez trois colonnes (dans Firefox et Chrome au moins).
    • Voici une version mise à jour: jsfiddle.net/Fa722/270 . Aussi je remarque que si le nombre d'éléments n'est pas divisible par le nombre de colonnes, il secoue lorsque vous redimensionnez la fenêtre. (cela fonctionne pour vous @SPRBRN)
    • Quelqu'un peut s'il vous plaît aider à organiser Glee génial 1 ,glee awesome 2 ,glee awesome 3 etc. horizontalement la même manière, en utilisant nombre de colonnes de la propriété?

    InformationsquelleAutor Chris
  2. 21

    Si vous jetez un oeil à l'exemple suivant - il utilise fixe la largeur des colonnes, et je pense que c'est le comportement demandé.

    http://www.vanderlee.com/martijn/demo/column/

    Si le fond de l'exemple est le même que le haut, vous n'avez pas besoin de jquery colonne plugin.

    CSS:

    ul{margin:0; padding:0;}

#native {
  -webkit-column-width: 150px;
  -moz-column-width: 150px;
  -o-column-width: 150px;
  -ms-column-width: 150px;
  column-width: 150px;
  
  -webkit-column-rule-style: solid;
  -moz-column-rule-style: solid;
  -o-column-rule-style: solid;
  -ms-column-rule-style: solid;
  column-rule-style: solid;
}

    HTML:

    <div id="native">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
  </ul>
</div>

    • pouvez-vous faire un JSFiddle ou CodePen, alors nous pouvons jouer avec elle ?
    • ne peux pas croire à une telle réponse valable n'a jamais reçu un seul vote.
    InformationsquelleAutor SPRBRN
  3. 5

    Je vous remercie pour cet exemple, SPRBRN. Il m'a aidé. Et je peux vous suggérer le mixin, que j'ai utilisé en se basant sur le code donné ci-dessus:

    //multi-column-list( fixed columns width)
  @mixin multi-column-list($column-width, $column-rule-style) {
  -webkit-column-width: $column-width;
  -moz-column-width: $column-width;
  -o-column-width: $column-width;
  -ms-column-width: $column-width;
  column-width: $column-width;

  -webkit-column-rule-style: $column-rule-style;
  -moz-column-rule-style: $column-rule-style;
  -o-column-rule-style: $column-rule-style;
  -ms-column-rule-style: $column-rule-style;
  column-rule-style: $column-rule-style;
 }

    À l'aide de:

       @include multi-column-list(250px, solid);
    InformationsquelleAutor InaFK
  4. 2

    Créer une liste avec de nombreux éléments de la liste que vous le souhaitez.
    Puis placez-la liste dans un div, paramètre style=largeur de la colonne et le style=column-gap, pour correspondre à l'information dans votre liste d'éléments. Ne définissez pas de style=de colonnes.
    Totalement responsive liste qui s'adapte à la taille de l'écran. Pas de plugins requis.

    InformationsquelleAutor Steve Brooker
  5. 1

    Vous pouvez le faire en utilisant CSS3.

    Voici l'extrait de code HTML:

    HTML:

    <ul id="listitem_ascolun">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>    
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
	<li>10</li>
	<li>11</li>
	<li>12</li>    
</ul>

    & Voici le code CSS3 :

    CSS:

    #listitem_ascolun ul{margin:0;padding:0;list-style:none;}

#listitem_ascolun {
    height: 500px;  
    column-count: 4;
	-webkit-column-count: 4;
	-moz-column-count: 4;
}

#listitem_ascolun li {
    display: inline-block;
}

    • Cela fonctionne si vous connaissez la hauteur. Mais si vous avez un nombre variable d'éléments qui doivent être réparti sur 3 colonnes, cela ne fonctionnera pas.
    InformationsquelleAutor Aminul Islam
  6. 1

    Utilisation de la largeur de la colonne de la propriété de css comme ci-dessous 

    <ul style="column-width:135px">
    InformationsquelleAutor Siddhartha