Question

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

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

示例here。

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 { 显示：块; }

只需添加此行。

问候D.

Answer 2

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

See this post for more information about inline-block alignment

通过向图片添加display:block，它将移除图片后添加的额外空间，从而使您的所有.thumb-container元素再次具有相同的高度

See this post about the space after the image

Answer 3

如果你不想改变css，另一个解决方案可能是添加一个固定高度的div并且在.thumb-container内部

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;

}

将调整大小功能更改为该功能，它可以正常工作，但效果不是最好但是有效。

由于没有理由，div被推倒了

4 个答案: