Sitio escalable: 50% a la izquierda 50% a la derecha

Tengo una página simple ilustrada en el siguiente enlace, que es escalable cuando cambia el tamaño de su navegador: http://pastehtml.com/view/1eg346q.html

Como funciona ahora, flota a la izquierda y cuando hay espacio para otra caja en la fila, las imágenes se mueven.

La cuestión es que, cuando intentas agrandar la ventana de tu navegador, crea mucho espacio en blanco hasta que finalmente hay espacio para una nueva caja, como esta: http://imageshack.us/photo/my-images/220/scal1.jpg/

¿Hay alguna forma de distribuir el espacio en blanco en ambos sitios cuando cambia el tamaño, por lo que es como un 50% a la izquierda y un 50% a la derecha? Quizás así: http://imageshack.us/photo/my-images/641/scal2.jpg/

La única forma en la que puedo pensar es centrar las cajas, pero no quiero que estén centradas todo el tiempo, solo cuando cambie el tamaño ...

Si no hay forma de hacer esto, ¿tiene alguna sugerencia mejor para escalar como lo hago ahora y al mismo tiempo sobre cómo deshacerse del espacio en blanco?

preguntado el 10 de mayo de 11 a las 13:05

3 Respuestas

Lo más fácil de hacer sería cambiar la clase de caja. float a display: inline-block luego envuelva todos los elementos en un contenedor, establezca un text-align: center; y margin: 0 auto;

Violín: http://jsfiddle.net/4UDxE/

contestado el 10 de mayo de 11 a las 17:05

Realmente me gustó esta solución si la última fila no estaba centrada: / - donpedroper

¿Hay alguna forma de resolver esto? ¡Porque eso realmente sería ganar / ganar! :D - donpedroper

Gracias. ¿Cómo quiere decir que la última fila no debería estar centrada? - Gary Green

Como las tres casillas de la última fila aquí: imageshack.us/photo/my-images/690/examplerx.jpg - por lo que flota a la izquierda o no se muestra de alguna manera .. - donpedroper

@Don Pedro - ¿Quieres papas fritas con eso? - Me duele la cabeza

No creo que sea posible con CSS puro.

Envolviendo las cajas en un div (con margin:0 auto y overflow:auto) y luego usando jQuery podemos hacer esto con

$( function(){
    var $container = $('#container');
    var $cparent = $container.parent();
    var boxsize = $('.box:first').outerWidth( true );

    $(window).resize(function(){
        var fitwidth = $cparent.width();
        var howMany = Math.floor( fitwidth / boxsize );
        $container.width( howMany * boxsize );
    }).resize();
});

manifestación http://jsfiddle.net/gaby/8BcQX/
en la demostración he cambiado el margen de la .box para ser 10px izquierda y 10px adecuado para un centrado más preciso


Noticias para comentarios

Con barra lateral en el interior: http://jsfiddle.net/gaby/8BcQX/1/ (tiene que dimensionarlo en consecuencia si lo desea y las cajas se alinean)

Con una barra lateral fuera de la cuadrícula: http://jsfiddle.net/gaby/8BcQX/2/ (cambios menores en jquery para adaptarse al tamaño de los hermanos en el contenedor)

contestado el 12 de mayo de 11 a las 18:05

Esto es realmente genial, aunque esperaba que se pudiera hacer solo en CSS :) ¿Es bastante fácil poner un cuadro lateral a la derecha si elijo esta solución? Lo intenté rápidamente ayer, pero pareció fallar, así que lo intentaré de nuevo hoy. donpedroper

@Don, ¿una caja lateral dentro del contenedor? o afuera ? (y tamaño fijo? o variable?) - Gabriele Petrioli

¿Quizás usando el evento onResize puede establecer la alineación en centrada y volver a la predeterminada una vez que finalice el evento?

$(window).bind('resize', function(){
  // do stuff!
});

contestado el 10 de mayo de 11 a las 17:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.