可扩展站点 - 50% 左 50% 右

发布于 2024-11-06 08:27:13 字数 684 浏览 4 评论 0原文

我有一个简单的页面，如以下链接所示，当您调整浏览器窗口大小时，该页面是可缩放的： 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/

我能想到的唯一方法是将框居中，但我不希望它们始终居中 - 仅当您调整大小时...

如果没有办法做到这一点，请执行此操作您对像我现在这样的缩放以及如何消除白色间距有更好的建议吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

九局 2024-11-13 08:27:13

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

Fiddle: http://jsfiddle.net/4UDxE/

回复收藏 0 原文

半葬歌 2024-11-13 08:27:13

也许使用 onResize 事件您可以将对齐方式设置为居中并在事件结束后恢复为默认值？

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

Maybe using the onResize event you can set the alignment to centered and back to default once the event ends?

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

回复收藏 0 原文

橘寄 2024-11-13 08:27:13

我认为纯 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 进行细微更改适应容器同级的大小）

I do not think that is possible with pure CSS.

Wrapping the boxes in a div (with margin:0 auto and overflow:auto) and then using some jQuery we can do this with

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

demo http://jsfiddle.net/gaby/8BcQX/
in the demo i have changed the margin of the .box to be 10px left and 10px right for more accurate centering

Update for comments

With a side bar in the inside : http://jsfiddle.net/gaby/8BcQX/1/ (you have to size it accordingly if you want it and the boxes to line-up)

With a sidebar outside the grid : http://jsfiddle.net/gaby/8BcQX/2/ (minor changes to the jquery to accommodate for the size of the siblings to the container)

回复收藏 0 原文

~没有更多了~