Question

我试图以网格的形式在屏幕上显示div。所有div具有相同的宽度但不同的大小。例如小div的大小为width=100px和height=100px，并且width=100px和height=200px的div很少。我想安排它们，以便占据屏幕上的所有空间。不应该有空的空间。

下面是一些HTML代码。

    <style> 
div {
    width:100px;
    height:100px;
    background:red;
    -webkit-animation:myfirst 5s;
    /* Chrome, Safari, Opera */
    animation:myfirst 5s;
    float:left;
    margin:5px;
}
.div1 {
    width:100px;
    height:200px;
    background:red;
    -webkit-animation:myfirst 5s;
    /* Chrome, Safari, Opera */
    animation:myfirst 5s;
    float:left;
    margin:5px;
}
</style>
</head>
<body>

<div></div>
<div></div>
<div></div>
<div></div>
<div class="div1"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

请看下面的输出。

enter image description here

请帮忙......

Answer 1

我想知道一些事情：正方形是否随机生成？是否有一个＆＃34; tall＆＃34;每一行都有？你可以使用jquery或javascript动态创建网格并设置位置吗？如果网格是预定的，那么通过每个＆＃34;短＆＃34;没有正确设置的div并给它一个

margin-top:-100px

但不要忘记考虑你的边距，以便网格看起来干净

根据原始海报的评论更新

由于数字来自数据库，您可以根据最大高度120px系统地填充页面。例如:(伪代码）

create div:height 120px
for(each number from database)
{
    for(each created div)
    {
        if( it fits in the div )
        { 
            add number to div
        }
    }
    if( it did not fit in any div )
    {
        create new div:height 120px
        add number to new div
    }
}

Answer 2

我只使用两个div包装器列并将正确的div放在它自己的div中。然后，您可以为除右列之外的所有div创建适当的水平间距。

Answer 3

您可以使用属性position: absolute为您的部门提供适当的职位。

Answer 4

这是你想要的吗？

http://jsfiddle.net/q7UxY/4/

我使用javascript通过找到每列的最小高度来排列div并放置它。

$('.box').each(function(element) {
    var index = findColumnIndex(columns);
    $box = $(this);
    $box.css({
        'position' : 'absolute',
        'left': ($box.width() * index + spacing * (index + 1) ) + 'px',
        'top': (columns[index] + spacing) + 'px'
    });
    console.log('left : "'+($box.width * index + spacing * (index + 1) ) + 'px'+'", top : "'+(columns[index] + spacing) + 'px'+'"');
    columns[index] += spacing + $box.height();
});

在网页上安排DIV

4 个答案: