Dos columnas automáticas con CSS o JavaScript

Question

Actualmente estoy desarrollando un sitio web y mi cliente desea que el texto de varios artículos se desborde en dos columnas. Algo así como en un periódico? Por lo que se vería así:

Today in Wales, someone actually  Nobody was harmed in 
did something interesting.   the incident, although one 
Authorities are baffled by this  elderly victim is receiving 
development and have arrested the  counselling. 
perpetrator.  

[mi muy mal intento de dar con algo para escribir]

¿Hay alguna manera de hacer esto con sólo CSS solo? Prefiero no tener que usar múltiples divs. También estoy dispuesto a usar JavaScript, pero estoy realmente mal con eso, así que la ayuda será apreciada. Estaba pensando que tal vez JavaScript podría contar cuántos < p> 's hay en el contenido div, y luego mover la segunda mitad de ellos para flotar bien en función de eso? ¿Tal vez? Los consejos serían apreciados: D

Answer 1

En primer lugar, no creo que solo CSS pueda hacer eso, pero me gustaría que se demuestre que está mal.

En segundo lugar, solo contar los párrafos no lo ayudará en absoluto, necesita al menos todas las alturas y calcular el centro de la altura del texto en función de eso, pero tendría que considerar el cambio de tamaño de la ventana, etc. No creo que exista una solución estándar razonablemente simple. Desafortunadamente soy pesimista sobre encontrar una solución perfecta a este problema, pero es interesante.

Answer 2

Probablemente lo manejaría en tu back-end, sea lo que sea. Un ejemplo en PHP podría ser:

$content = "Today in Wales, someone actually did something..."; 
// Find the literal halfway point, should be close to the textual halfway point 
$pos = int(strlen($content)/2); 
// Find the end of the nearest word 
while ($content[$pos] != " ") { $pos++; } 
// Split into columns based on the word ending. 
$column1 = substr($content, 0, $pos); 
$column2 = substr($content, $pos+1); 

Probablemente debería ser posible hacer algo similar en JavaScript con InnerHTML, pero personalmente me gustaría evitar toda esa situación debido a que más y más personas están utilizando plugins como NoScript que desactiva JavaScript hasta que esté explícitamente permitido para el sitio x, y por encima de cualquier otra cosa, div y CSS fueron diseñados para degradarse muy bien. Una solución de JavaScript se degradaría horriblemente en este caso.

Answer 3

la buena noticia es que hay un CSS only solution. la mala noticia es que no hay ningún soporte importante para él en existing browsers. si se implementa, se vería así:

div.multi { 
    column-count: 3 
    column-gap: 10px; 
    column-rule: 1px solid black;  
} 

creo que por ahora lo mejor es, probablemente, del lado del servidor como se ha mencionado por el monóxido de

Answer 4

Here's a JQuery plugin, que hace las columnas de forma automática, y puede incluso variar el número de columnas basado en el tamaño de la pantalla

No he usado esto por mí mismo, pero échale un vistazo.

Answer 5

Si está utilizando Mootools, puede consultar MooColumns.

Answer 6

Esto es difícil de lograr en HTML/CSS/JS por una razón (aunque estoy seguro de que es posible).

Los periódicos usan múltiples columnas para reducir el ancho de línea y hacer que el texto sea más legible. Esto está bien en el papel porque cuando terminas una columna das vuelta al ojo hasta el comienzo de la siguiente.

En la web utilizamos el desplazamiento para permitir que el texto continúe más allá de los límites de la pantalla, por lo tanto, no necesita columnas.

Answer 7

Esto es compatible con una extensión CSS de Mozilla solamente: -moz-column-count.Ver: https://developer.mozilla.org/en/CSS3_Columns