Question

我正在尝试使用动态列来填充所有空间，因此它不像表格那样，更具流动性。

我正在从左到右创建框，当它们向左浮动到新列时，我希望它们向上移动并填充空白区域。这可能吗？

在下面的代码中，我希望包含第8行和第9行的框直接位于第1行的框下，没有垂直空格。这些盒子是动态的，所以我不知道每个盒子里面会有多少行。

感谢。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>float</title>
<style>
.b1 {
    width:300px;
    border: thin solid #C30;
    margin:0;
    padding:0;  
}
.b2 {
    margin:0;
    padding:0;
    border: thin solid #00F;
    float:left;
}
.line {
    list-style-type: none;
    width:90px;
    margin:0;
    padding:0;
}
</style>
</head>
<body>
<div class="b1">
    <div class="b2">
        <li class="line">line 1</li>
    </div>

    <div class="b2">
        <li class="line">line 2</li>
        <li class="line">line 3</li>
        <li class="line">line 4</li>
    </div>

    <div class="b2">
        <li class="line">line 5</li>
        <li class="line">line 6</li>
    </div>
    <div class="b2">
        <li class="line">line 7</li>
    </div>

    <div class="b2">
        <li class="line">line 8</li>
        <li class="line">line 9</li>
    </div>
</div>
</body></html>

Answer 1

使用一点JavaScript / jQuery可以实现这种效果：

var coords = new Array();
var i = 0;
$('.b2').each(function()
{
    var t = this.offsetTop;
    var l = this.offsetLeft;
    var w = this.offsetWidth;
    var h = this.offsetHeight;
    var arr = new Object({'t': t, 'l': l, 'w': w, 'h': h});
    coords.push(arr);
    if (i > 0)
    {
        for (var j=0; j<i; j++)
        {
            if (coords[j].l == l)
            {
                var ofs = t - (coords[j].t + coords[j].h);
                this.style.marginTop = '-'+ofs+'px';
            } 
        }
    }
    i++;
});

我试图得到不均匀的列

1 个答案: