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

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

1 голос
/ 10 мая 2011

У меня есть простая страница, показанная по следующей ссылке, которая масштабируется при изменении размера окна браузера: 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 ]

2 голосов
/ 10 мая 2011

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

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

1 голос
/ 10 мая 2011

Я не думаю, что это возможно с чистым 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 для соответствия размеру братьев и сестер в контейнере )

0 голосов
/ 10 мая 2011

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

...