javascript - 将所有图像与 div 中的间隙相匹配

Question

我的缩略图目前大小为 240 x 125，因此它的大小不适合所有缩略图水平放置在一个 div 中。

如何让它们在网格中水平显示？另外，如何使调整大小后的图像具有相同的宽高比并且它们之间有 15 像素的间隙？

我的 CSS

#full { height:400px; background:#FAFAFA;}
#thumbs { height:150px; background:#E7E7E7; }
#thumbs img { float:left; margin:0 15px; }

这是我的 jQuery

$(document).ready(function() {
    $('#thumbs > img').width($('#thumbs').width()/$('#thumbs > img').length-15);
});

Answer 1

你说你想要在 img 之间留出 15px 的间距，但是你设置了 margin:0 15px，这意味着左右都是 15px，所以它们之间的间距是30px，就是这个问题。您应该只设置一侧 margin-left:15px。

试试这个:

$(document).ready(function() {
    var $img = $('#thumbs > img'),
        len = $img.length,
        gap = $img.css('margin-left').replace('px',''),//15
        divW = $('#thumbs').width()-gap;

    $img.width(divW/len-gap);
});