que - Dos columnas automáticas con CSS o JavaScript

title css

Question

Actualmente estoy desarrollando un sitio web y mi cliente quiere que el texto de varios artículos se desborde en dos columnas. Algo así como en un periódico? Entonces 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 realmente mal intento de encontrar algo para escribir]

¿Hay alguna manera de que pueda hacer esto solo con CSS? 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> hay en el div de contenido, y luego mover la segunda mitad de ellos para flotar correctamente en función de eso. ¿Tal vez? Los consejos serían apreciados: D

Answer 1

Esto se admite en una extensión de CSS única de Mozilla: -moz-column-count . Ver: https://developer.mozilla.org/es/CSS3_Columns

Answer 2

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

En segundo lugar, solo contar párrafos no te ayudará en absoluto, necesitas al menos todas las alturas y calcular el centro de la altura del texto en función de eso, pero tendrías que dar cuenta del cambio de tamaño de la ventana, etc. No creo que haya es una solución lista para usar razonablemente simple. Desafortunadamente soy pesimista sobre encontrar una solución perfecta a este problema, pero es interesante.

Answer 3

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

$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 sea posible hacer algo similar en JavaScript con InnerHTML, pero personalmente evitaría toda esa situación porque cada vez más personas usan complementos como NoScript que deshabilita JavaScript hasta que esté explícitamente permitido para x sitio, y sobre todo, div''s y CSS fueron diseñados para degradarse muy bien. Una solución de JavaScript se degradaría horriblemente en este caso.

Answer 4

Si está utilizando Mootools, puede ver las MooColumns .

Answer 5

la buena noticia es que solo hay una solución de CSS . la mala noticia es que no hay ningún soporte importante para él en los navegadores existentes . si se implementó, se vería así:

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

Creo que por ahora su mejor apuesta es probablemente el lado del servidor como lo menciona el monóxido

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 necesitamos columnas.

Answer 7

Aquí hay un plugin JQuery que hace columnas automáticamente, e incluso puede variar el número de columnas según el tamaño de la pantalla.

No he usado esto yo mismo, pero échale un vistazo.