Ordenar texto en columnas con css3

Para aquellos que hemos luchado con css2 durante mucho tiempo si viéramos algo como esto:

Pensaríamos seguramente en la siguiente solución:

Tres div con posición float left para cada columna. Sin embargo con css3 podemos separar el texto de un bloque en x cantidad de columnas, como una noticia de un diario (periódico)

En css3 existe una propiedad llamada column-count, que recibe un valor numérico que es justamente la cantidad de columnas que queremos que el texto quede ordenado. Por ejemplo:

<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
 <head>
    <meta charset="utf-8">
    <title>Aca va el titulo de la pagina</title>
    <style type="text/css"> 
       #dos_columnas {
          width: 950px;
          margin: 0px auto 0px auto;
          /* Para ordenar en columnas */
          column-count: 3;
          -moz-column-count: 3; 
          -webkit-column-count: 3;
          -o-column-count: 3;
          /* Para dar espacio entre columnas */
          column-gap: 2em;
          -moz-column-gap: 2em;
          -webkit-column-gap: 2em;
          -o-column-gap: 2em;
       } 
    </style>
 </head>
 <body>
    <div id="dos_columnas">
       <h1> HTML, CSS y Javascript según la Wikipedia </h1>
       <p> HTML, siglas de HyperText Markup Language («lenguaje de marcado de hipertexto»), hace referencia al lenguaje de marcado predominante para la elaboración de páginas web que se utiliza para describir y traducir la estructura y la información en forma de texto, así como para complementar el texto con objetos tales como imágenes. El HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>). HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo, JavaScript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.1 </p>
       <p> La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación. </p>
       <p> La información de estilo puede ser adjuntada como un documento separado o en el mismo documento HTML. En este áltimo caso podrían definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo "style". </p>
       <p> JavaScript es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos,3 basado en prototipos, imperativo, débilmente tipado y dinámico. </p>
    </div>
 </body>
</html>

Redes sociables

    2 Replies to “Ordenar texto en columnas con css3”

    1. Por que nadie explica desde “0”, por ejemplo, con que extensión o codificación guardar el archivo, pensáis que ya se supone que se sabe pero no es así.

      gracias de todas formas.

      1. No estoy de acuerdo con lo que decís, tenés la crítica demasiado fácil.

        Se supone que este tema es un tema de css nivel medio, por lo cual, si no sabés qué extensión tiene un archivo css, no entiendo por qué revisas estos temas.

        Primero lo primero.

        Saludos!

    Deja un comentario

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

    *