Las propiedades son column-count y column-width.
La primera permite definir en cuántas columnas queremos que se divida el texto de determinada capa y la segunda, el ancho de cada una. Son dos propiedades que normalmente se usarán de manera alternativa, ya que mientras column-count hace invariable la cantidad de columnas, column-width lo que fija es el ancho mínimo de cada columna, ajustando el número de columnas en función del espacio disponible. Esto que parece un poco un trabalenguas, quizás se vea mejor probando a ensanchar y a encoger la ventana de este ejemplo, en el cual se han introducido los dos tipos de propiedades.
Complementariamente disponemos de dos propiedades más que permiten especificar el espacio entre columnas (column-gap), así como introducir una línea vertical de división (column-rule).
Como es habitual, ahora falta que los distintos navegadores vayan incorporando estas propiedades para facilitarnos el asunto a los que nos dedicamos a teclear código, pero de momento, para Firefox, Chrome y Safari, ya podemos hacer uso de los prefijos -moz- y -webkit- para que la cosa funcione.
.columnas {
-moz-column-width: 200px;
-moz-column-gap: 20px;
-moz-column-rule: 1px dashed #000000;
-webkit-column-width: 200px;
-webkit-column-gap: 20px;
-webkit-column-rule: 1px dashed #000000;
text-align:justify;
}
-moz-column-width: 200px;
-moz-column-gap: 20px;
-moz-column-rule: 1px dashed #000000;
-webkit-column-width: 200px;
-webkit-column-gap: 20px;
-webkit-column-rule: 1px dashed #000000;
text-align:justify;
}
La inserción del código anterior en nuestro CSS, servirá para definir columnas de 200px de ancho, con una separación entre columnas de 20px y una línea discontinua negra de 1px de separación, además de que el texto salga justificado dentro de dichas columnas.
El definir anchos de columna fijo hará que en diseños de ancho de página variable, el número de columnas se ajuste al espacio de ventana disponible. Ventanas de algo más de 800px darán lugar a cuatro columnas en el ejemplo, pero cuando la ventana se reduzca, las columnas se irán estrechando hasta un mínimo de 200px para cada una, momento a partir del cual se reformateará todo con una columna menos. Si fuéramos ampliando la ventana, pasaría a la inversa y en el momento en que cupiera una quinta columna de 200px, se pasaría a mostrar el texto en cinco columnas. Esto es lo que se puede apreciar en la parte superior del susodicho ejemplo.
.columnas4 {
-moz-column-count: 4;
-moz-column-gap: 20px;
-moz-column-rule: 1px dashed #000000;
-webkit-column-count: 4;
-webkit-column-gap: 20px;
-webkit-column-rule: 1px dashed #000000;
text-align:justify;
-moz-column-count: 4;
-moz-column-gap: 20px;
-moz-column-rule: 1px dashed #000000;
-webkit-column-count: 4;
-webkit-column-gap: 20px;
-webkit-column-rule: 1px dashed #000000;
text-align:justify;
Este otro código en el que sólo cambia la primera propiedad, hace que invariablemente se muestren cuatro columnas, cambiando su anchura a medida que vayamos haciendo más grande o más pequeña la ventana del navegador. Es lo que se puede ver en la parte inferior del mismo ejemplo.
La forma de aplicarlo es simplemente mediante la aplicación de la clase correspondiente al texto:
<div class="columnas">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, etc.
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, etc.
</div>
Esto facilita bastante las cosas ¿no?
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Mucho mejor con css3 que no con el básico html.
ResponderEliminarGracias Oloman
Mercier, ahora sólo falta que todos los navegadores lo incorporen ;)
ResponderEliminarUps! No conosco eso del CSS3 ^^.
ResponderEliminarPero amigo, resulta que tengo un problema GRAVISIMO, y es que cuando intento entrar a mi blog, y me aparece un error llamado bX-e4h7xh.
Amigo, espero tu sepas decirme que le pasa a mi blog, la verdad me urge mucho solucionar ese error.
Varios amigos mios han intentado entrar y les aparece el error, si quieres verlo tu, este es el link de mi blog http://www.limitesptc.blogspot.com.
Bueno amigo Oloman, solo eso, que estes bien.
Bendiciones!
Eso parece cuestión para el servicio técnico de Google, al que veo que ya has acudido.
ResponderEliminarPuede ser cosa de Blogger, pero se me ocurre que quizás hayas eliminado sin querer algún código imprescindible de tu plantilla.
Por probar suerte y si todavía puedes entrar al Panel de control, intenta restaurar la última copia de seguridad que tuvieras.
Si no tenías ninguna haz ahora una copia de tu plantilla, otra de tus posts y guardas ambas (en cualquier caso, esto no te va a venir mal)
Luego prueba a colocar una plantilla de las que hay estándar a ver si se soluciona la cosa. Si no se arregla, casi seguro que es cosa de Blogger.
Si se arregla, ya sabes que el fallo está en la plantilla guardada. O bien la olvidas, o bien pruebas también esto otro:
- compruebas las dos primeras líneas de una y de otra
- si son distintas, sustituye en la plantilla guardada esas dos líneas por las de la plantilla "buena"
- suerte
El otro día una amiga que está armando un blog me preguntaba como hacer para dividir el texto en dos columnas y no supe ayudarla, ahora le comento esto, seguro le sirve.
ResponderEliminarMuchas gracias Oloman, para hacerlo mas rapido hize una copia de las entradas, y cambie la plantilla, y ahora va super bien mi foro, con solo decirte que ya tengo dominio personalizado ^^.
ResponderEliminarMuchas gracias, bendiciones!.
O sea, ¿que todo el problema era la plantilla? Lo dije por agotar posibilidades, pero estaba convencido que sería otra cosa. Bueno pues nada, ya tienes todo en marcha de nuevo.
ResponderEliminar