metal.ize - Tutorial: Listas Multicolumnas

¿Qué es esto?

Aquí les dejo unos ejemplos de listas acomodadas en varias columnas usando unas cuantas clases en CSS y posicionamiento absoluto.

¡Atención!

Estas listas tienen algunas desventajas: a) Existe un límite a las columnas que puedes agregar; pues depende del ancho del contenido. Si tienes un layout líquido, esta no es la mejor técnica (recomiendo uses floats o algo parecido) b) Si el texto en las listas es dinámico y cuenta con dimensiones o saltos de línea diferentes siempre, esta técnica no funciona. los elementos se amontonan y c) Con listas muy largas puede llegar a ser un problema.

Ejemplo de listas

Lista con 3 filas y 3 columnas:

  1. uno
  2. dos
  3. tres
  4. cuatro
  5. cinco
  6. seis
  7. siete
  8. ocho
  9. nueve

Lista con 3 filas en las primeras dos columnas, 4 filas en la tercer columna:

  1. uno
  2. dos
  3. tres
  4. cuatro
  5. cinco
  6. seis
  7. siete
  8. ocho
  9. nueve
  10. diez

Lista con 2 columnas, 3 y 4 filas respectivamente:

  1. uno
  2. dos
  3. tres
  4. cuatro
  5. cinco
  6. seis
  7. siete

Lista con 1 columna y 7 filas:

  1. uno
  2. dos
  3. tres
  4. cuatro
  5. cinco
  6. seis
  7. siete

Lista desordenada con elementos ordenados alfabéticamente: