El CSS
Primero vamos a eliminar el margin y padding de la lista, solo por gusto visual; y posicionaremos la lista relativamente:
- ol { position: relative; margin: 0 }
Ahora debemos darle un alto y ancho fijo a nuestros <li>. Recomiendo que el alto sea en ems, pues es más amigable con los usuarios y navegadores.
- ol li { height: 1.1em; width: 125px; position: absolute }
Ahora vamos a posicionar las columnas. Para este demo, haré un estilo que soporte listas de hasta 3 (1, 2 y 3) columnas y 7 (a, b, c, d, e, f y g) filas. Para posicionar las columnas, lo que haremos es dar un margen a la izquierda de 150px por columna (el ancho de nuestros <li> más 25px de margen entre columnas).
- /* Posicionando las columnas */
- /* Primer Columna */
- li.a-1,
- li.b-1,
- li.c-1,
- li.d-1,
- li.e-1,
- li.f-1,
- li.g-1 {
- margin-left: 0;
- }
- /* Segunda Columna */
- li.a-2,
- li.b-2,
- li.c-2,
- li.d-2,
- li.e-2,
- li.f-2,
- li.g-2 {
- margin-left: 150px;
- }
- /* Tercer Columna */
- li.a-3,
- li.b-3,
- li.c-3,
- li.d-3,
- li.e-3,
- li.f-3,
- li.g-3 {
- margin-left: 300px;
- }
Como verán, la tercer columna tiene un margen de 300px. Esto es porque tiene dos columnas a su izquierda, y no solo una. Si van a agregar otra columna, deben volver a sumar 150px (o el ancho que hayan escogido) a su margen izquierdo.
Ahora solo nos queda posicionar las filas. Como cada <li> es de 1.1em de alto; este es el alto que usaremos para posicionar los elementos:
- /* Posicionando filas */
- li.a-1, li.a-2, li.a-3 { top: 0 }
- li.b-1, li.b-2, li.b-3 { top: 1.1em }
- li.c-1, li.c-2, li.c-3 { top: 2.2em }
- li.d-1, li.d-2, li.d-3 { top: 3.3em }
- li.e-1, li.e-2, li.e-3 { top: 4.4em }
- li.f-1, li.f-2, li.f-3 { top: 5.5em }
- li.g-1, li.g-2, li.g-3 { top: 6.6em }
Si agregan más filas, sólo sumen 1.1em (o el alto que hayan usado) a cada fila y listo.
Ahora solo nos queda un pequeño detalle. Como vamos a manejar varias listas con diferentes altos (número de filas), debemos manejar su alto desde nuestro CSS:
- /* Alto de Tablas */
- ol.filas-1 { height: 1.1em }
- ol.filas-2 { height: 2.2em }
- ol.filas-3 { height: 3.3em }
- ol.filas-4 { height: 4.4em }
- ol.filas-5 { height: 5.5em }
- ol.filas-6 { height: 6.6em }
- ol.filas-7 { height: 7.7em }
Y con eso podemos manejar cualquier número de listas. 
Pueden agregar o cambiar elementos a su gusto. Ahora bien, no todo es hermoso y bello con esta técnica.
Contras
- 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).
- 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.
- Con listas muy largas puede llegar a ser un problema.
Les dejo un ejemplo de las listas multi-columnas en acción. Espero les sea de ayuda.
Excelente tutorial, había visto uno similar en ALA , pero nada mejor que tenerlo en tu idioma y con esta buena explicación.
Muchas gracias ñ_ñ
Hola, como estas.
Estoy buscando a alguien que me instale en mi servidor los siguientes modulos:
FFmpeg
FFmpeg-PHP
Mplayer + Mencoder
flv2tool
Libogg + Libvorbis
LAME MP3 Encoder
Me podrias ayudar?, conoces a alquien?
Te agradeceria que me respondieras a mi email.
Gracias.
Gracias por el tutorial, esta interesante. Sin embargo no me quedo claro porque cada elemento tiene su propia clase, en lugar de asignar clases directamente por columna.
ej:
uno
dos
tres
cuatro
cinco
seis
siete
ocho
nueve
-->
Gracias por el tutorial, esta muy interesante (y muy útil). Sin embargo no me quedo claro porque cada elemento tiene su propia clase, en lugar de asignar clases directamente por columna.
Ejemplo:
Gracias.
Muy bueno
proximamente te agrego a mi blogroll !
Saludos!
Buenisimo tutorial! ... pero yo no me conformo, debe de haber una manera de hacer listas más flexibles X| ... andare haciendo pruebas, si encuentro algo, aviso.
Por cierto, que mal que ya no vivas en Guadalajara, te invitaría unas copas
... saludos paisano!!!!!
Hola, este tutorial está genial.
Yo sólo tengo un problema: delante de cada linea de la lista me sale un numero y lo quiero quitar.
Ejemplo:
1. Hola 3. Hasta Luego 4. Bye Bye
2. Adios
¿Alguien sabe como?
Saludos
Me contesto al instante..jaja..
Sólo tenía que poner
list-style: none;
^_^
Dany: También te recomiendo que en lugar de <ol> uses <ul>. Ya que, si no quieres números muy probablemente se trate de una lista sin ningún orden en específico.
Gracias por el dato.
Tanto tiempo dedicado a hacer blogs, webs... y todavía me queda mucho por aprender.
No tiene mucha gracia hacerlo asi, es demasiado fijo.
Poco dinamico.