CSS div换行和垂直空白

Question

当容器的宽度改变时，我尝试让几个div元素换到下一行。包装部分运行良好，当没有足够的宽度使其适合时，盒子将下降到下一行，但是如果高度不同，第一行元素和第二行元素之间会有间隙。在下面的示例中，我希望将框b4滑入b1下的空白区域。这个是可能的吗？谢谢你的帮助。

http://jsfiddle.net/86xcY/

Answer 1

    hello one small changes  i this case you must set the min-height and  max-height     details as follows. and when you add the content the height automatically increased.


   #box3 {
    display: table-cell;
    max-height: 300px;
    min-height: 98px;
    width: 200px;
 }

Answer 2

这可能就是你要找的东西。它可能会被优化很多，并调整以更好地满足您的需求。此外，当它转到单个列时，有一个bug，我不想费心对它进行排序。更有可能的是，最好的解决方案是在特定屏幕宽度下将所有margin-top值设置为0。

http://jsfiddle.net/86xcY/1/

$(window).resize(function(e){
    var wid = $("#container").width();

    $("#container .box").each(function(index, element){
        $(this).css("margin-top", 0);
        var top = $(this).position().top;
        var left = $(this).position().left;

        var upwards = null;
        var htm = $("html")[0];

        if (top > 0){
            var cTop = top;
            while ((upwards == null || upwards == htm) && cTop > 0){
                cTop -= 10;
                upwards = document.elementFromPoint(left, cTop);
            }
            var uTop = $(upwards).position().top;
            var uHei = $(upwards).height();

            var negMarg = (uTop + uHei) - top;

            if (negMarg < 0){
                $(this).css("margin-top", negMarg);
            }
            else if (negMarg > 0)
                $(this).css("margin-top", 0);
        }
    });
});​

Answer 3

如果您将float:left添加到您的元素中，这是可能的。