Масштабируемый сайт - 50% слева, 50% справа

У меня есть простая страница, показанная по следующей ссылке, которая масштабируется при изменении размера окна браузера: http://pastehtml.com/view/1eg346q.html

Как это работает сейчас, оно всплывает слева, и когда в ряду есть место для другой коробки, картинки перемещаются.

Дело в том, что когда вы пытаетесь увеличить окно браузера, оно создает много пустого пространства до тех пор, пока, наконец, не появится место для нового окна - как это: http://imageshack.us/photo/my-images/220/scal1.jpg/

Есть ли какой-нибудь способ распространения белого пространства в обоих сайтах при изменении размера, так что это примерно 50% слева и 50% справа? Возможно, вот так: http://imageshack.us/photo/my-images/641/scal2.jpg/

Единственный способ, которым я могу думать, - это центрировать прямоугольники, но я не хочу, чтобы они центрировались постоянно - только когда вы изменяете размер...

Если нет способа сделать это, есть ли у вас лучшие предложения по масштабированию, как я делаю сейчас, и в то же время о том, как избавиться от интервала белого?

Источник

3 ответа

Решение

Самое простое, что можно сделать, это изменить класс бокса. float в display: inline-block затем оберните все элементы в контейнере, установите text-align: center; а также margin: 0 auto;

Скрипка: http://jsfiddle.net/4UDxE/

Источник

Я не думаю, что это возможно с чистым CSS.

Завернуть коробки в div (с margin:0 auto а также overflow:auto), а затем с помощью некоторого jQuery мы можем сделать это с

$( 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();
});

демо-версия http://jsfiddle.net/gaby/8BcQX/
в демо я изменил маржу .box быть 10px левый и 10px право на более точное центрирование

Обновление для комментариев

С боковой панелью внутри: http://jsfiddle.net/gaby/8BcQX/1/ (вы должны изменить ее размер, если хотите, и ящики выстраиваются в очередь)

С боковой панелью вне сетки: http://jsfiddle.net/gaby/8BcQX/2/ (незначительные изменения в jquery для соответствия размеру братьев и сестер в контейнере)

Источник

Может быть, используя событие onResize, вы можете установить выравнивание по центру и вернуться к значению по умолчанию после завершения события?

$(window).bind('resize', function(){
  // do stuff!
});
Источник
Другие вопросы по тегам