Multiples columnas utilizando listas y CSS

 
 
Más ...
Posteado el: 19/02/2010  por: Craftyman
Tags:  ,

 

Crear 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.

<ul class="dos_columnas">
  <li>CSS</li>
  <li>XHTML</li>
  <li>Semantics</li>
  <li>Accessibility</li>
  <li>Usability</li>
  <li>Web Standards</li>
  <li>PHP</li>
  <li>Typography</li>
  <li>Grids</li>
  <li>CSS3</li>
  <li>HTML5</li>
  <li>UI</li>
</ul>

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

Post Relacionados

Deja tu Comentario

1 Comentarios para este Post

  1. Faust Dice:

    Buen tuto, thx, me servira en mi blog y en futuros proyectos!!