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>
No hay comentarios:
Publicar un comentario