div显然无缘无故被压低

Question

我有一个5格的简单网格，每个格包含一个图像。

为什么最后一个div（具有不同的图像）具有偏移量？ 它没有明显的原因被推下。

这里的例子。

的CSS

.thumb-container {
  border: 1px solid #e5e5e5;
  padding: 15px;
  margin-right: 15px;
  margin-bottom: 15px;
  width: 130px;
  height: 130px;
  display: inline-block;
}

的JavaScript

  $.when( loadImageSet(imageURLs) ).then(function(data){

    var imageSet = [];

        $.each(data, function(index, value){
            imageSet.push(value);
        })

    for (var i = 0; i < imageSet.length; i++) {

        var thumbContainer = $('<div>',
          {class: 'thumb-container'});

        img = resizeImage(imageSet[i], 100);
        thumbContainer.append(img);
        $('.box').append(thumbContainer);
    }
  });

编辑

我知道了，我需要将vertical-align: top为.thumb-container或将display:block设置为img。 但是仍然不明白为什么会这样。

Answer 1

img {display：block; }

只需添加此行。

关于D。

Answer 2

由于您的元素是inline-block元素，因此默认情况下它们将与基线垂直对齐。 由于其中一个元素的大小与其他元素不同，这会导致框显示得更低。 通过将它们设置为vertical-align:top可以解决此问题

有关内联块对齐的更多信息，请参见这篇文章。

通过向图像添加display:block ，它将删除在图像之后添加的多余空间，从而使所有.thumb-container元素再次具有相同的高度

有关图片后的空间，请参阅此帖子

Answer 3

如果您不想更改CSS，则另一种解决方案是添加一个固定高度并在.thumb-container内部的div。

Answer 4

不太确定为什么，但是改变图像大小的javascrip也会改变盒子的位置。

function resizeImage(image, size){
var w = image.width;
var h = image.height;

// resize width and make height proportional
var nh = size;
var nw = w*size/h;
if (nw > 100)
{
  nw = 100;
}


// if height > size, resize height and make width proportional
if (nh > size){
    nh = size;
    nw = w*size/h;
}

image.width = nw;
image.height = nh;

return image;

}

将调整大小功能更改为该功能并可以，不是最好的，但是可以。