maqueta texto en columnas solo con css3

maquetacion 3 columnas con css3
  • Ruben Carracedo Cano
  • Sin categoría
  • 26 / 02 / 2014
  • 0 Comments

Aquí os traigo el método definitivo para, mediante CSS3, organizar los textos en columnas.Para crear una texto de dos o más columnas utilizaremos unos atributos que nos sirven para definir las columnas:

colum-width: define la anchura de las distintas columnas a crear.
column-gap: define el espacio en blanco entre columnas.
column-rule: crea una línea divisoria entre las columnas.

Al no estar estandarizado CSS3, en necesario que pongamos los prefijos necesarios para cada tipo de motor de renderizado web. También añadiremos una etiqueta sin prefijo para los navegadores que soporten el estandar:

1
2
3
4
5
6
7
8
9
10
11
#columnas{
-moz-column-width: 15em;
-moz-column-gap: 15px;
-moz-column-rule: 1px solid #ccc;
-webkit-column-width: 15em;
-webkit-column-gap: 15px;
-webkit-column-rule: 1px solid #ccc;
column-width: 15em;
column-gap: 15px;
column-rule: 1px solid #ccc;
}

Ahora un ejemplo. Queremos poner un texto en tres columnas en nuestra web:

Utilizaremos la etiqueta <section> o la que queramos pero con un id especifico.

1
2
3
<section id="columnas">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac neque sed diam vulputate accumsan. Donec lacinia aliquet justo, ac convallis nunc tristique ut. In hac habitasse platea dictumst. Sed euismod malesuada nunc, eget venenatis turpis sodales ac. Aliquam aliquet dui quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer ultrices urna eu erat placerat pellentesque. Phasellus tincidunt porttitor laoreet. Donec suscipit magna vitae turpis elementum quis facilisis metus congue. </p>
</section>

En el css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#columnas{
-moz-column-count: 3;
-moz-column-gap: 60px;
-webkit-column-count: 3;
- webkit-column-gap: 60px;
column-count: 3;
column-gap: 60px;
border-bottom: 1px solid #88CCBB;
font-size: 12px;
line-height: 1.2em;
margin: 0 auto;
padding: 0 0 20px;
text-align: justify;
}

Compartid el artículo en vuestras redes sociales y no olvidéis comentar!!!
Google

The following two tabs change content below.
Ruben Carracedo Cano

Ruben Carracedo Cano

Analista Programador at Adviqo Telelinea
Soy un profesional Web Multiplataforma con mucha curiosidad y ganas de seguir mejorando. Tecno-Friki entre otros vicios. Me encanta todo lo relacionado con la programación y el desarrollo de aplicaciones. En mis ratos libres investigo novedades tecnológicas, busco adaptar la tecnología para facilitar su uso cotidiano.
Ruben Carracedo Cano

Latest posts by Ruben Carracedo Cano (see all)

Deja un comentario