Diseño HTML para Crucigrama

Estoy formateando una página web para mostrar un crucigrama. Me gustaría que se muestre en un formato similar al de un periódico para facilitar la impresión. Algo así como lo siguiente:Diseño HTML para Crucigrama

Crossword Layout

la idea de que hay una lista de pistas que estamos trabajando y cada columna se desborda en la siguiente y las alturas de las columnas se optimiza de manera que los primeros éxitos en la parte inferior del crucigrama (la caja grande) y las otras tres tienen aproximadamente la misma altura.

¿Hay alguna manera de hacer esto con CSS y HTML? Sospecho que no existe. ¿JavaScript es el camino a seguir? ¡Gracias!

editar para agregar:

Utilizando la columna de ancho y -moz -moz-column-gap que soy capaz de conseguir esta mejora de trazado:

Improved Layout

Cualquier ¿Pensamientos sobre cómo podría hacer que el crucigrama se moviera hacia arriba y que las pistas fluyeran a su alrededor? ¡Gracias!

ADEMÁS editar para agregar:

me trataron flotando el div rejilla y que sólo se establece en sí en la parte superior del texto, en realidad no empujar el texto fuera del camino. No estoy seguro de cómo cambiar eso. Esto es lo que parece:

Floating Grid

Yo probé flotante de las pistas de la izquierda, que todos ellos alineados en una sola columna en el lado izquierdo de la página. Esto es lo que sucedió si flotaba los elementos de la lista individual o toda la lista ordenada. ¿Alguna idea sobre algo que me he perdido? ¡Gracias por toda tu ayuda!

Fuente

2011-03-09 J. Frankenstein

@Frankenstein Columnas están aquí: http://www.w3.org/TR/css3-multicol –

Šime, esto es genial! ¡Debes convertir esto en una respuesta para poder verificarlo! –

Bueno, excepto por tenerlo fluir alrededor del crucigrama ... ¿alguna reflexión sobre eso? –

Mi solución fue utilizar algún código JavaScript para rellenar las columnas y cambiar el tamaño del texto si no encajaba. No es la solución más elegante, pero funcionó.

Fuente

2011-06-28 17:57:58

Ver Newspaper-column in CSS; simplemente puede colocar el crucigrama como un flotador.

Fuente

2011-03-09 23:32:09

Esto es demasiado trabajo para lo que quiero hacer, ¡pero gracias por el liderazgo! –

Usa lo que tienes. Establezca la posición en el cuadro de crucigramas en relativa y muévala hacia arriba. Obviamente no puedo ver tu fuente pero con un pequeño ajuste que debería hacer que haga lo que quieres. También puede necesitar flotar el texto a la izquierda.

Fuente

2011-03-10 02:17:32 smartcaveman

¡Gracias por la sugerencia! Pude mover el cuadro de crucigramas, pero no pude lograr que empujara el texto a un lado. En su lugar, simplemente establece y oscurece parcialmente el texto. Agregué una imagen a la pregunta. –

hacer que floten tanto la caja como las columnas de texto. – smartcaveman

Lamentablemente, esto no parece funcionar con CSS multi-columna. Creo que voy a explorar la reasignación dinámica de las listas usando jQuery. –

Diseño HTML para Crucigrama

Respuesta

Cuestiones relacionadas