jquery - CSS div 换行和垂直空白

Question

当容器的宽度发生变化时，我试图让几个 div 元素换行到下一行。包装部分工作正常，当没有足够的宽度容纳它时，框将下降到下一行，但是如果高度不同，则第一行元素和第二行元素之间存在间隙。在下面的示例中，我希望框 b4 向上滑入 b1 下方的空白区域。这可能吗？谢谢你的帮助。

http://jsfiddle.net/86xcY/

Answer 1

这可能与您正在寻找的内容接近。它可能会进行很多优化，并进行调整以更好地满足您的需求。此外，当它转到单个列时存在一个错误，我无法对其进行排序。很有可能，最好的解决方案是将所有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 2

    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 3

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