martes, 26 de noviembre de 2013

Como crear columnas de texto con CSS


Bienvenid@s, hoy veremos un modo práctico y fácil de crear columnas con CSS, para ello primeramente es necesario saber cuanto queremos que mida de ancho cada columna, si queremos que sea a través de píxeles(fijo) o porcentajes(ajustable), este asunto es cuestión de cada diseñador y depende si el desarrollo se está llevando a cabo a través de responsive design o del modo tradicional.

Para crear las columnas es conveniente crear una clase la cual albergue las propiedades css para cada una de las columnas, estas propiedades pueden reflotar(float) a la izquierda por ejemplo tres columnas que se ajusten a la anchura de la ventana, cada una de las columnas es un div, que puede contener el texto o las imágenes que quieras, también es necesario romper el reflotamiento de las columnas mediante otro div que vuelva las cosas a su sitio, para ello por ejemplo se puede crear otra clase que contenga la propiedad clear con valor both para que el contenido que siga a continuación vuelva a su estado natural.

A continuación puedes ver un ejemplo con tres columnas y su respectivo código abajo ...


Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí".
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí".
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí".


<!-- By http://jquery-manual.blogspot.com -->
<!DOCTYPE HTML>
<html>
<head> 
<title>Como crear columnas de texto con css</title>
 <style>

 .column{
 float: left;
 width: 20%;
 border-left: 1px solid grey;
 padding-left: 10px;
 border-right: 1px solid grey;
 }
 
  .break-column
  {
  clear: both;
  }
 </style>
 </head>
 <body>
 <h1>Como crear columnas de texto con css</h1>
 <div class="column">
 Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto.
 El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí".
 </div>
 <div class="column">
 Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto.
 El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí".
 </div>
 <div class="column">
 Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto.
 El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí".
 </div>
 <div class="break-column"></div>
</body>
</html>