1

我在以下链接中有一个简单的页面，当您调整浏览器窗口大小时，它是可扩展的：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/

我能想到的唯一方法是将框居中，但我不希望它们一直居中 - 只有当你调整大小时......

如果没有办法做到这一点，你有没有像我现在这样缩放的更好的建议，同时关于如何摆脱白色间距？

4

3 回答 3

1

最简单的做法是更改 box 类float，display: inline-block然后将所有元素包装在一个容器中，设置 atext-align: center;和margin: 0 auto;

小提琴：http: //jsfiddle.net/4UDxE/

于 2011-05-10T13:51:19.380 回答
0

也许使用 onResize 事件，您可以将对齐设置为居中并在事件结束后返回默认值？

$(window).bind('resize', function(){
  // do stuff!
});
于 2011-05-10T13:32:11.807 回答
0

我认为纯 CSS 不可能做到这一点。

将盒子包装在一个 div 中（withmargin: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 进行细微更改以适应容器的兄弟姐妹的大小）

于 2011-05-10T14:30:06.457 回答