CSS

Crear columnas con CSS

La creación de columnas sin tablas es uno de los primeros problemas con los que nos topamos al tratar de estructurar nuestro sitio con hojas de estilo CSS. Bien, pues aca te diremos como solucionarlo a definiendo propiedades a las listas.

Vamos a crear una lista que se acomode en cuautro columnas, para esto definimos las etiquetas <ul> y <li> de la siguiente forma:

<style type="text/css">

/*Definimos una clase para <ul> */

  ul.columnas {
  Float: left;
  width: 100%; /*Este ancho será el total que ocupen muestras columnas */
  List-style-type: none; /*Eliminamos las viñetas */
  }
  
/*Definimos las propiedades para <li> a partir de las otorgadas a <ul>*/

  ul.columnas li{
  Display:inline; /*Se declara que las propiedades serán otorgadas a cada linea*/
  Float: left;
  Width:25%;} /*Al definir el ancho definimos también el número de columnas, siendo 25% para 4 columnas, 33% para 3, 50% para 2 y asi para la cantidad de columnas que deseemos */

</style>

Definidas de esta forma, determinamos el ancho total de todas las columnas y la cantidad de ellas distribuidas en ese espacio. Para aplicar estas propiedades, basta aplicar estas propiedades a una lista como se muestra a continuación:


<ul class="columnas">
<li>CSS</li>
<li>HTML</li>
<li>PHP</li>
<li>JAVASCRIPT</li>
<li>ASP</li>
<li>XHTML</li>
<li>ACTIONSCRIPT</li>
</ul>

Descargar el ejemplo

Deja un comentario

8 Comentarios