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

J’essaie de construire ma première mise en page réactive. Je veux afficher les éléments de la liste dans une ligne verticale, en fonction de la largeur.

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
 1 5
 2 6
 3 7
 4

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

 1 4 7
 2 5
 3 6

Est-ce que quelqu’un peut m’aider? J’ai essayé pendant des heures et je ne peux rien obtenir. J’ai essayé d’utiliser des tables mais je ne peux pas le faire non plus.

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

 #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*/ } 
  

Si vous regardez l’exemple suivant – il utilise des colonnes de largeur fixe, et je pense que c’est le comportement requirejs.

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

Si l’exemple du bas est le même que celui du haut, vous n’avez pas besoin du plugin de colonne jquery.

 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; } 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

Merci pour cet exemple, SPRBRN. Ça m’a aidé. Et je peux suggérer le mixin, que j’ai utilisé en fonction du code 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; } 

En utilisant:

  @include multi-column-list(250px, solid); 

Créez une liste avec autant d’éléments de liste que vous le souhaitez. Ensuite, placez la liste dans un div, en définissant style = column-width et style = column-gap, pour faire correspondre les informations de vos éléments de liste. Ne définissez pas style = columns. Liste totalement réactive qui s’adapte à la taille de l’écran. Aucun plugin requirejs.

Vous pouvez le faire en utilisant CSS3.

Voici l’extrait de code HTML:

 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

Utilisez la propriété column-width de css comme ci-dessous