Cambio de tamaño / reposicionamiento dinámico de divs para visualización de columnas múltiples

Question

Configuración

Tengo un sitio web que dibuja fuentes RSS y las muestra en la página. Actualmente, uso porcentajes en los divs que contienen cada feed, para que los múltiplos puedan aparecer uno al lado del otro.

Sin embargo, solo tengo dos uno al lado del otro, y si la ventana cambia de tamaño, puede haber un espacio vacío feo en la pantalla.

Deseo

Lo que me gustaría poder hacer, pero aún no he descubierto una forma, es poner todos los feeds linealmente en la página y tener:

• una vista de varias columnas 'preconstruida' donde los feeds '' equilibrarían '' ellos mismos en las columnas

que me lleva a:

• el número de columnas cambia dependiendo de qué tan ancha es la pantalla actualmente \

Esto es similar a cómo las aplicaciones de procesamiento de texto manejan diseños en columnas.

Pregunta

Supongo que necesitaré implementar alguna forma de felicidad AJAXy, pero actualmente sé muy poco sobre Javascript.

¿Hay alguna manera de hacer esto con just CSS / HTML / PHP?

Si no, ¿cómo debo resolver esto?

solución final:

(basado en @warpr 's y las respuestas de @ joh6nn )

#rss
        {min-width: 10em;
        max-width: 25em;
        min-height: 15em;
        max-height: 25em;
        font-size: .97em;
        float: left;
        }

Answer 1

Probablemente no pueda obtener lo que desea con solo CSS / HTML, pero puede acercarse un poco.

Un truco que utilicé para un álbum de fotos es este:

1. Asegúrese de que cada feed tenga un ancho fijo, recomendaría algo como '20em';
2. Asegúrese de que cada feed tenga la misma altura.
3. Flota todo lo que queda.

Debido a que cada div tiene las mismas dimensiones, cuando flotan a la izquierda formarán una cuadrícula con exactamente el número de columnas que caben en su navegador.

A menos que realmente corrija la altura de los divs y use CSS para recortar el contenido, necesitará javascript para el paso 2, lo que hice fue:

1. Iterar sobre cada div de alimentación, encontrando el div más alto.
2. Itere sobre cada div nuevamente, cambiando la altura para que coincida con el div encontrado en el primer paso.

Esto es bastante fácil de implementar, pero obviamente no es óptimo. Espero leer cualquier solución mejor publicada aquí :)

Answer 2

es posible que pueda hacer esto con listas; Nunca lo he probado, así que no estoy seguro.

si visualiza los elementos de la lista: en línea, la lista se vuelve horizontal en lugar de vertical. a partir de ahí, si inserta la lista en un elemento contenedor y juega con el relleno y los márgenes, es posible que pueda hacer que la lista se deforme, como texto: nuevamente, nunca lo he intentado, así que no saber.

si esta técnica funciona, estaría muy interesado en escucharla.

Answer 3

La única forma en que puedo pensar es en una mezcla de CSS dinámico y javascript. Cada vez que se agrega una columna (feed), use el javascript para reescribir el ancho (en porcentaje) de cada div.

jQuery sería útil aquí.

var columns = $(".feed").size();
var size = 100/columns;
$(".feed").css("width",size+"%");

Alguien puede corregirme si me equivoco. Mi jQuery es un poco tambaleante.

Por supuesto, si no está utilizando AJAX, podría implementar la misma solución completamente en PHP.

Answer 4

También puede utilizar este jQuery javascript (necesitará la biblioteca jQuery).

var docwidth = $(document).width();
var numOfCollums = $('.feed').length;
var colWidth = docwidth/numOfCollums;
$('.feed').each( function() {
     $(this).width(colWidth);
});

Que establecería el ancho de la columna dinámicamente.

Para que esto funcione, sus columnas deben tener la clase 'feed'

EDITAR:

Deberías darle estilo a tus divs de esta manera:

.feed{
  float:left;
}