¿Cómo mostrar elementos de la lista como columnas?

Estoy tratando de construir mi primer diseño receptivo. Quiero mostrar elementos de la lista en una línea vertical, dependiendo del ancho.

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

Si el navegador cambia de tamaño, quiero que se convierta

 1 4 7
 2 5
 3 6

¿Alguien me puede ayudar? He estado intentando durante horas y no puedo obtener nada. He intentado usar tablas pero tampoco puedo hacerlo así.

Esto se puede hacer utilizando columnas CSS3 con bastante facilidad. Aquí hay un ejemplo, 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 echas un vistazo al siguiente ejemplo, usa columnas de ancho fijo, y creo que este es el comportamiento solicitado.

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

Si el ejemplo inferior es el mismo que el superior, no necesita el complemento de la columna 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

Gracias por este ejemplo, SPRBRN. Me ayudó. Y puedo sugerir el mixin, que he usado en base al código proporcionado anteriormente:

 //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; } 

Utilizando:

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

Crea una lista con tantos elementos de lista como quieras. A continuación, encierre la lista en un div, estilo de configuración = ancho de columna y estilo = espacio de columna, para que coincida con la información de los elementos de su lista. No establezca style = columns. Una lista totalmente receptiva que se adapta al tamaño de la pantalla. No se requieren complementos.

Puedes hacer eso usando CSS3.

Aquí está el fragmento de código HTML:

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

Use la propiedad de ancho de columna de css como a continuación