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

这可能接近你正在寻找的东西。它可能会进行很多优化，并进行调整以更好地满足您的需求。此外，当它转到单个列时有一个错误，我不能打扰它。更有可能的是，最佳解决方案是在一定的屏幕宽度下将所有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。

CSS div包装和垂直空白

3 个答案: