Question

我有这样的事情： http://s9.postimg.org/wwizuwnq7/Untitled_1.png

如果你看到，div（我用绿色标记的地方）有一些像素的空间。我希望如果div之间有一个0-20像素的空间，就像这样命令它们： http://s23.postimg.org/ky2htcpt7/image.png

所以，我开始在javascript上做这个，我不知道继续..

var position = new Array();
$(".post").each(function(){
    position[$(this).attr("id")] = $(this).offset().top - $(window).scrollTop();
});

现在我拥有所有div的所有位置，现在我需要检查div有0到20像素的空间，然后我想取下更高的块。

我不确定这是否是好方法，如果现在，我需要另一个想法..

谢谢！

Answer 1

我设法找到了一种方法！

var position = new Array();
$(".hblocks").each(function(){
    position[$(this).attr("id")] = $(this).offset().top;
});

$.each(position, function(key, value) {
    $.each(position, function(key2, value2) {
        var space = value2 - value;
        if (space <= 20 && space >= -20 && space != 0)
        {
            var finalSpace = Math.max(value, value2);
            var spaceplus = space + 28;
            if (finalSpace != value)
            {
                $("#" + key).css("margin-top",spaceplus + "px");
            }
            else
            {
                $("#" + key2).css("margin-top",spaceplus + "px");
            }
        }
    });
});

Answer 2

您不能简单地在 CSS 中为所选元素添加底部边距吗？

#element {
   margin-bottom: 20px;
}

Answer 3

您可以通过在底部2个块周围添加容器div来完成此操作。这样，无论顶部两个块中的任何一个的高度如何，它们将始终排成一行。你应该尽量不使用javascript来造型。 CSS非常强大。

这是一个小提琴：http://jsfiddle.net/kVn7x/

<强> HTML：

<div>
    <div style='height:100px;'></div>
    <div style='height:200px;'></div>
</div>

<div style='clear:left'>
    <div style='height:80px;'></div>
    <div style='height:80px;'></div>
</div>

<强> CSS：

div div{background:red; width:150px; display:inline-block; margin:5px; float:left; clear:none}

Answer 4

你的答案将是javascript + css编码的王者，以验证元素的高度..在em上工作然后重新安排它们。

不要试图自己弄清楚，尝试使用CSSTrick上解释的Masonry或jQueryEqualHeight。

什么是砌体？

Masonry是一个JavaScript网格布局库。它通过放置工作基于可用垂直空间的最佳位置的元素，排序就像石匠在墙上贴石头一样。你可能已经看过了在互联网上使用。

Answer 5

这是未经测试的，但是这样的事情应该在你的代码之后......

我的想法是不断向问题div的上边距添加1像素，直到两个div之间的差异为20px

 while(position['div1'] - position['div2'] <20){
     $('#div2').animate({marginTop: '+=1px'}, 0);
 }

如果你想像你的照片一样直接显示它们，那就更容易了：

 var diff = position['div1'] - position['div2']
 if(diff < 20){
     $('#div2').animate({marginTop: '+=' + diff + 'px'}, 0);
 }

用javascript订购div

5 个答案: