<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>

现行法典:rel=“nofollow” http://grahamthomas.me/temp/test.html

无论大小,都设法使上述电网留在窗户中。 目前,我有大致集中的,但当窗户面积得到调整时,在新一栏有内容(即动态电网在三栏之间,但四栏之间)之前,中心就变得不便。

我在联合材料中并不重要,但我的逻辑是:

• create a 100% wrapper (which would mimic the body.innerWidth dimension in the JS)
• create a centered wrapper inside this (80% for example)
• place the content in the centered wrapper
• once the 100% wrapper is large enough to handle an additional column, append the new div within the centered wrapper

你们可以清楚地看到过度流通:当把窗户拖走时,隐藏的财产被压在最右箱上。 我从此假设,窗户的宽度是适当计算的。 我尝试了各栏的变量,例如:

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

存放在窗户内,但依然没有合适的中心。

在我看来,有人对此有想法?

增 编