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