如何根据窗口宽度居中列答案

【问题标题】：how to center columns based on window width如何根据窗口宽度居中列
【发布时间】：2011-10-13 07:58:02
【问题描述】：

<link rel="stylesheet" type="text/css" href="reset.css" />      
<style type="text/css">
        body { position: relative; }

        .contain { position:relative; overflow: hidden; width: 80%; height: 100%; margin: 0 auto; }     

        .box {
            background-color: #F0F0F0;
            color: #888;
            font-family: Arial, Tahoma, serif;
            font-size: 13px; }

        .box p { padding: 10px; }

        .box span {
            float: left;
            font-size: 26px;    
            font-weight: bold;  }

        div.alt { background-color: #CCC; }
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
    var myFluidGrid = {
            COLNUMBER : 2, // Minimum column number.
            COLMARGIN : 10, // Margin (in pixel) between columns/boxes.
            COLWIDTH : 240, // Fixed width of all columns.

            doLayout : function() {
                var self = this;
                var pointer = 0;
                var arr = [];
                var columns = Math.max(this.COLNUMBER, parseInt($('body').innerWidth() / (this.COLWIDTH + this.COLMARGIN)));

                $('.box').css('position', 'absolute').css('width', this.COLWIDTH  + 'px');
                $('.box').each(function() {
                    var tempLeft = (pointer * (self.COLWIDTH + self.COLMARGIN));
                    $(this).css('left', tempLeft + 'px');

                    var tempTop = 0;
                    if (arr[pointer]) { tempTop = arr[pointer]; }
                    $(this).css('top', tempTop + 'px');

                    arr[pointer] = tempTop + $(this).outerHeight() + self.COLMARGIN;
                    pointer++;
                    if (pointer === columns) { pointer = 0; }
                });
            }
        };
        $(window).ready(function() {
            myFluidGrid.doLayout();
        }).resize(function() {
            myFluidGrid.doLayout();
        });
    </script>

<div class="contain">    
    <div class="box">This is box number 1...</div> 
    <div class="box">This is box number 2...</div>
    <div class="box">This is box number 3...</div>
</div>

当前代码演示：http://grahamthomas.me/temp/test.html

试图让上面的网格保持在窗口的中心，不管它的大小。我目前将它大致居中，但是当调整窗口大小时，居中变得不真实，直到新列填充了内容（即当动态网格位于列之间时——大于 3 列，但不完全是 4）。

我不擅长JS，但我的逻辑是：

创建一个 100% 的包装器（模仿 body.innerWidth JS 中的维度）
在其中创建一个居中的包装器（例如 80%）
将内容放在居中的包装器中
一旦 100% 包装器足够大以处理额外的列，则将新 div 附加到居中的包装器中

在将窗口拖得更小时，您可以清楚地看到 overflow:hidden 属性“越过”最右侧的框。我由此假设，没有正确计算窗口宽度。我尝试了 var 列的变体，例如：

var columns = Math.max(this.COLNUMBER, parseInt(($('body').innerWidth() * 0.8)/ (this.COLWIDTH + this.COLMARGIN)));

..将列保留在窗口内，但仍不是适当的中心。

我已经看了一段时间了，有人有什么想法吗？

谢谢

【问题讨论】：

你能更具体地解释一下你的目标是什么吗？我会查看 jQuery 插件 Isotope。我经常将它用于这些自定义类型的流体布局
@Greg 我的目标是让所有可见的框居中。因此，当您有 3 列时，它们在屏幕上居中，然后当您将窗口拉得更宽时，这 3 列保持居中，直到第 4 列弹出。就像 Isotope 在这里所做的那样：http://isotope.metafizzy.co/tests/centered-masonry.html

标签： javascript css

【解决方案1】：

无需 JavaScript：

<html>
<head>
<style>
body {
    text-align: center;
}
div.main {
    position: absolute;
    top: 100px;
    left: 50%;
    margin-left: -40%;
    width: 80%;
}

div.main div.block {
    height: 180px;
    width: 180px;
    background: #a00;
    float: right;
    margin: 10px;
}
</style>
</head>
<body>
<div class="main">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>
</body>
</html>

【讨论】：

谢谢。虽然，这个例子并没有解决列之间的居中问题，而且它是一个经典的网格，所以它不能容纳不同高度的盒子。