rear listas con multiples columnas en nuestra Web es una manera muy utíl de reducir espacio innecesario y aprovecharlo con otros modulos, por ejemplo en mi blog tengo una lista de categorías en el sidebar, estan en 2 columnas y para mi encajan a la perfección.
Para lograr este objetivo solo es necesario crear una lista (ul) y convertir las filas(li) en elementos flotantes, dandole como ancho una medida en porcentaje, si queremos utilizar 2 columnas debemos colocar como ancho un 50% (width:50%;).

HTML: Armaremos la lista HTML.
- CSS
- XHTML
- Semantics
- Accessibility
- Usability
- Web Standards
- PHP
- Typography
- Grids
- CSS3
- HTML5
- UI
CSS: Crearemos clases para tipos de columnas.
ul{ width:760px; margin-bottom:20px; overflow:hidden; border-top:1px solid #ccc; } li{ line-height:1.5em; border-bottom:1px solid #ccc; float:left; display:inline; } .dos_columnas li { width:50%;} .tres_columnas li { width:33.333%; } .cuatro_columnas li { width:25%; } .cinco_columnas li { width:16.666%; }
Ejemplo HTML
jfdghjhthit45
Buen tuto, thx, me servira en mi blog y en futuros proyectos!!
[…] Multiples columnas utilizando listas y CSS. […]
Perfectamente explicado!
Una duda… cómo sería si necesitara que las columnas no fuesen de anchos iguales?
Muy interesante y util! Gracias.
Una duda: como sería si necesitos las columnas pero de distintos anchos?
Comments are closed.