可扩展的网站 - 50％左右50％正确

Question

我在以下链接上展示了一个简单的页面，当您调整浏览器windwow时，该页面可以扩展：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/

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

如果没有办法做到这一点，你是否有更好的扩展建议，就像我现在一样，同时又如何摆脱白色间距？

Answer 1

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

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

Answer 2

我不认为使用纯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进行微小更改以适应容器的兄弟姐妹的大小）

Answer 3

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

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